国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于Css的垂直居中的一些方法

simpleapples / 1040人閱讀

摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用調(diào)用來查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。

前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用javascript調(diào)用
offsetTop來查看。不然沒有強迫癥的比較難看出來。但是兼容性很好，尤其是table-cell的從IE6即可使用

1.使用table-cell處理圖片間的關(guān)系

父元素使用display:table-cell; vertical:middle
子元素使用display:inline-block; vertical:middle;

即可簡單使圖片居中

2.使用line-height處理

父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//這里的line-heiht要跟父元素大小一樣；
子元素使用vertical-align:middle;

第三種稱為絕對居中，不居中來找我，就是兼容性有點差，起碼要IE9 才能兼容，一般的webkit也都沒問題就是。隨著ES6的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。但是有問題的是，必須指定height，因為顯然，這邊計算的是下移50%的當前高度的Y軸。而前面兩種方法不需要
3.使用translateY來垂直居中

父元素使用position:relative;height:400px;
子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;

以下是全部代碼，自己找張demo.jpg做實驗就可以





    
    test





    
        a
        
    -->

    

        呵呵

部分idea 參考自以下文章

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111302.html

相關(guān)文章

  • 關(guān)于css 的垂直居中

    摘要：之前看了張大大的博客總結(jié)一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。 對于元素的水平居中，我根據(jù)我自己之前的一些學習來進行一些總結(jié)，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

    caspar 評論0 收藏0

  • 關(guān)于css 的垂直居中

    摘要：之前看了張大大的博客總結(jié)一下我對和的一些認知。站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。 對于元素的水平居中，我根據(jù)我自己之前的一些學習來進行一些總結(jié)，如果有不對的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因為：表格的單元格的特別屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

    icattlecoder 評論0 收藏0

  • 關(guān)于Css的垂直居中的一些方法

    摘要：前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用調(diào)用來查看。隨著的泛濫，很快老舊的瀏覽器也就成了古董，所以這個居中方法也挺不錯，就是對于兼容性很高的項目，最好不要使用。 前兩種方法稱為大致居中，一般誤差隨高度的減小而減小，不過一般來說不怎么看得出來，除非你用javascript調(diào)用offsetTop來查看。不然沒有強迫癥的比較難看出來。但是兼容性...

    freewolf 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<