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

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)垂直居中的4種思路

Pikachu / 3513人閱讀

摘要：測(cè)試文字若子元素定高，結(jié)合絕對(duì)定位的盒模型屬性，實(shí)現(xiàn)居中效果測(cè)試文字關(guān)于增加層級(jí)的說明在水平居中對(duì)齊中，元素外層套一層并設(shè)置，元素設(shè)置負(fù)或者的負(fù)屬性，可以實(shí)現(xiàn)水平居中的效果。

行高line-height實(shí)現(xiàn)單行文本垂直居中

以前一直認(rèn)為單行文本垂直居中要將高度和行高設(shè)置成相同的值，但高度其實(shí)沒必要設(shè)置。實(shí)際上，文本本身就在一行中居中顯示。在不設(shè)置高度的情況下，行高撐開高度。




測(cè)試文字

設(shè)置vertical-align:middle實(shí)現(xiàn)垂直居中

【1】設(shè)置父元素的display為table-cell

通過為table-cell元素設(shè)置vertical-align:middle，可使其子元素均實(shí)現(xiàn)垂直居中。這和表格里單元格的垂直居中是類似的

[注意] 若要IE7-瀏覽器支持，則可以將其改為

表格結(jié)構(gòu)

[注意] 設(shè)置為table-cell的div不能使用浮動(dòng)或絕對(duì)定位，因?yàn)楦?dòng)或絕對(duì)定位會(huì)使元素具有塊級(jí)元素特性，從而喪失了table-cell元素具有的垂直對(duì)齊的功能。

若需要浮動(dòng)或絕對(duì)定位處理，則需要外面再套一層div。




    
我是有點(diǎn)長(zhǎng)的有點(diǎn)長(zhǎng)的有點(diǎn)長(zhǎng)的有點(diǎn)長(zhǎng)的測(cè)試文字

【2】若子元素是圖片，通過設(shè)置父元素的行高來代替高度，且設(shè)置父元素的font-size為0。

vertical-align:middle的解釋是元素的中垂點(diǎn)與父元素的基線加1/2 父元素中字母X的高度對(duì)齊。由于字符X在em框中并不是垂直居中的，且各個(gè)字體的字符X的高低位置不一致。

所以，當(dāng)字體大小較大時(shí)，這種差異就更明顯。當(dāng) font-size為0時(shí)，相當(dāng)于把字符X的字體大小設(shè)置為0，于是可以實(shí)現(xiàn)完全的垂直居中。




  test

【3】通過新增元素來實(shí)現(xiàn)垂直居中的效果

新增元素設(shè)置高度為父級(jí)高度，寬度為0，且同樣設(shè)置垂直居中vertical- align:middle的inline-block元素。由于兩個(gè)元素之間空白被解析，所以需要在父級(jí)設(shè)置font-size:0，在子級(jí)再將 font-size設(shè)置為所需值；若結(jié)構(gòu)要求不嚴(yán)格，則可以將兩個(gè)元素一行顯示，則不需要設(shè)置font-size:0。




  
我是比較長(zhǎng)的比較長(zhǎng)的多行文字
思路三：通過絕對(duì)定位實(shí)現(xiàn)垂直居中

【1】若子元素不定高， 使用top50%配合translateY(-50%)可實(shí)現(xiàn)居中效果。
translate函數(shù)的百分比是相對(duì)于自身高度的，所以top:50%配合translateY(-50%)可實(shí)現(xiàn)居中效果。

[注意]IE9-瀏覽器不支持；

[注意]若子元素的高度已知，translate()函數(shù)也可替換為margin-top: 負(fù)的高度值。




  
測(cè)試文字

【2】若子元素定高，結(jié)合絕對(duì)定位的盒模型屬性，實(shí)現(xiàn)居中效果




  
測(cè)試文字

<關(guān)于增加div層級(jí)的說明>

在水平居中對(duì)齊中，元素外層套一層div并設(shè)置absolute，元素設(shè)置負(fù)margin-left或者relative的負(fù)left屬性，可以實(shí)現(xiàn)水平居中的效果。但由于margin是相對(duì)于包含塊寬度的，這樣margin-top:-50%得到的是寬度而不是高度的-50%，所以不可行；對(duì)于relative的百分比取值而言，在包含塊高度為auto的情況下，chrome、safari和IE8+瀏覽器都不支持設(shè)置元素的百分比top值，所以也不可行。

思路四：使用彈性盒模型flex實(shí)現(xiàn)垂直居中

[注意] IE9-瀏覽器不支持

【1】在伸縮容器上設(shè)置側(cè)軸對(duì)齊方式align-items: center




    
測(cè)試文字

【2】在伸縮項(xiàng)目上設(shè)置margin: auto 0




    
測(cè)試文字

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

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

相關(guān)文章

  • 使一個(gè)div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個(gè)問題思路絕對(duì)定位居中原始版這個(gè)是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

    joyqi 評(píng)論0 收藏0

  • css實(shí)現(xiàn)水平/垂直居中效果

    摘要：一如果是已知寬高的元素做水平垂直居中效果的話，可以直接用具體的數(shù)值指定定位布局或偏移布局，這個(gè)就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實(shí)現(xiàn)方式。 一、如果是已知寬高的元素做水平/垂直居中效果的話，可以直接用具體的數(shù)值指定定位布局或偏移布局，這個(gè)就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實(shí)現(xiàn)方式。 二、1.table表格法 思路：顯示設(shè)置父元素為：tab...

    Ilikewhite 評(píng)論0 收藏0

  • css常見的各種布局上（兩列布局）

    摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁慕課網(wǎng)個(gè)人中心頁個(gè)人中心頁二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁3、慕課網(wǎng)個(gè)人中心頁4、github個(gè)人中心頁二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

    番茄西紅柿 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • CSS3 垂直居中詳解

    摘要：但要實(shí)現(xiàn)垂直居中確是一大難題。彈性盒子絕對(duì)定位視口單位彈性盒子彈性盒子應(yīng)該是解決垂直居中的最佳方案，隨著的逐漸沒落，惹人煩的兼容性問題正逐漸被克服。里有一個(gè)和一個(gè)，想將這兩個(gè)元素在里垂直居中，同樣只需給它們的父元素設(shè)和。 CSS里實(shí)現(xiàn)水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。但要實(shí)現(xiàn)垂直居中確是一大難題。本...

    DTeam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
    <fieldset id="w0iia"><menu id="w0iia"></menu></fieldset>
    
<