成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

垂直居中解決方案總結(jié)

王偉廷 / 3283人閱讀

摘要：而的百分比是相對于元素自身的寬高，這個(gè)方法可以用于子元素高度不確定時(shí)，而且不用手動除以，比上面幾個(gè)方便了很多。，全為可以實(shí)現(xiàn)上下左右居中，超級方便這也是我在項(xiàng)目里用得最多的。上面是基于絕對定位的解決方案，還有其他的。

點(diǎn)這個(gè)鏈接可以直接看到效果：http://www.zhouyangyang.com/c...

這是公用樣式

.outer {
    width: 150px;
    height: 200px;
    background: pink;
    border: 1px solid pink;
}
.inner {
    background: #77BFCD;
}

1,負(fù)margin
父元素position relative,子元素position absolute,top 50%,margin-top 為負(fù)的元素height/2。
缺點(diǎn)：子元素高度固定的時(shí)候才能用，而且計(jì)算麻煩。




    

        
first line

        
second line

2，css3 calc()
跟上面沒啥區(qū)別，也是要子元素高度固定，手動除以2。
不過可以少寫一行margin-top。




    

        
first line

        
second line

3,translateY
百分比形式的margin-top是相對于元素包含塊的寬度的，所以上面的方法都要手動除以2。
而 translateX translateY 的百分比是相對于元素自身的寬高，這個(gè)方法可以用于子元素高度不確定時(shí)，而且不用手動除以2，比上面幾個(gè)方便了很多。
有些瀏覽器下，transform后如果寬高的像素點(diǎn)不是整數(shù)，顯示會模糊，可以用transform-style:preserve-3d修復(fù)。




    

        
first line

        
second line

4,margin auto，top right left bottom 全為0
可以實(shí)現(xiàn)上下左右居中，超級方便,這也是我在項(xiàng)目里用得最多的。不過這個(gè)只能在元素設(shè)置了寬高的時(shí)候用。




    

        
first line

        
second line

上面是基于絕對定位的解決方案，還有其他的。
5，表格布局
父元素display table-cell,virticl-align middle,子元素display table。




    

        
first line

        
second line

6，行內(nèi)塊方法
將子元素設(shè)置display:inline-block，vetical-align:middle,父元素行高等于高度，
缺點(diǎn)是只能用在父元素高度固定的條件下。




    

        
first line

        
second line

7，另一種行內(nèi)塊方法
給父元素一個(gè):before偽子元素，讓這個(gè)偽元素height:100%，然后讓這個(gè)偽子元素和真正的子元素都display:inline-block vetical-align:middle。




    

        
first line

        
second line

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112100.html

相關(guān)文章

  • 對css居中的一點(diǎn)總結(jié)

    摘要：為了更好的加深對居中的理解，搜集和閱讀相關(guān)資料，發(fā)現(xiàn)不錯(cuò)的文章將其整理出來。 在學(xué)習(xí)前端的過程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會出現(xiàn)的問題，在實(shí)際工作中也會經(jīng)常碰到。居中的技巧有很多，但在編寫代碼的過程中，發(fā)現(xiàn)有時(shí)候技巧管用，有時(shí)候不管用，于是就將每個(gè)知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認(rèn)識不夠深入，只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對居中的...

    BenCHou 評論0 收藏0

  • css對齊方案總結(jié)

    摘要：核心代碼利用布局利用布局，其中用于設(shè)置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項(xiàng)在容器的當(dāng)前行的側(cè)軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結(jié) 垂直居中 通用布局方式(內(nèi)斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

    marek 評論0 收藏0

  • css居中總結(jié)

    摘要：前言一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。又必須有個(gè)父級對其進(jìn)行設(shè)置居中。 前言 一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。 水平居中 行內(nèi)元素水平居中 行內(nèi)元素的居中比較簡單，直...

    gxyz 評論0 收藏0

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • 總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

    摘要：如果要居中的塊級元素直接是內(nèi)聯(lián)元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產(chǎn)生默認(rèn)的間距，父元素設(shè)置可以很好地解決這個(gè)問題。使用水平居中前提居中的元素必須是塊級元素，如果是內(nèi)聯(lián)元素，需要添加屬性而且元素不浮動。 前端開發(fā)中，我們經(jīng)常需要對元素進(jìn)行水平垂直居中。為此，小編特地總結(jié)了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

    fnngj 評論0 收藏0

發(fā)表評論

0條評論

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