亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vertical-align 和 line-height | 垂直居中

ybak / 1719人閱讀

摘要：垂直居中當(dāng)設(shè)置此時(shí)的頁(yè)面看似垂直居中，但是并沒(méi)有完全垂直居中。中線位置字符的中心并不是字符內(nèi)容的絕對(duì)居中位置。這種通過(guò)定高，元素垂直居中的方法不僅適用于現(xiàn)代瀏覽器，連瀏覽器也是支持的。

今天在寫(xiě)樣式時(shí)，icon和文字都進(jìn)行了垂直居中的處理，但是icon并沒(méi)有垂直居中，后來(lái)發(fā)現(xiàn)由于 line-height 和 vertical 一起使用導(dǎo)致與預(yù)期樣式不同，特此對(duì) vertical-align 總結(jié)進(jìn)行！

vertical 支持很多屬性：

/*  關(guān)鍵字值  */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/*  <長(zhǎng)度> 值  */
vertical-align: 10em;
vertical-align: 4px;
/*  <百分比> 值  */
vertical-align: 10%;
/*  全局值  */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

當(dāng) vertical-align 和 line-height 同時(shí)出現(xiàn)時(shí)出現(xiàn)樣式差異是由于：vertical-align的百分比值不是相對(duì)于字體大小或者其他什么屬性計(jì)算的，而是相對(duì)于line-height計(jì)算的。

1、現(xiàn)象

Div內(nèi)包裹一個(gè)img標(biāo)簽，給div添加背景發(fā)現(xiàn)div下部分多出一部分留白空間，這個(gè)現(xiàn)象就是由于vertical-align和line-height共同起作用的原因。
對(duì)于內(nèi)聯(lián)元素，vertical-align與line-height雖然看不見(jiàn)，但實(shí)際上「到處都是」！

2、幽靈空白節(jié)點(diǎn)

一個(gè)寬度為0, 表現(xiàn)如同普通字符的看不見(jiàn)的 “節(jié)點(diǎn)”。
對(duì)于上面的問(wèn)題，給文字添加一個(gè)白色背景，效果如下：
Vertical-align默認(rèn)的對(duì)齊方式為：baseline，也就是基線對(duì)齊。基線為文字的下邊緣。
所以圖片與文字的下邊緣對(duì)齊，文字的高度是由行高決定。

解決方式
1、讓vertical-align失效

圖片默認(rèn)是inline水平的，而vertical-align對(duì)塊狀水平的元素?zé)o感。因此，我們只要讓圖片display水平為block就可以了，我們可以直接設(shè)置display或者浮動(dòng)、絕對(duì)定位等
給img標(biāo)簽添加display:block樣式，將img變?yōu)閴K級(jí)元素發(fā)現(xiàn)問(wèn)題消失了。

2、使用其他vertical-align值

不用baseline，使用其他的屬性值，比如：middle、top、bottom
lign屬性后空白節(jié)點(diǎn)消失。

3、修改line-height的值

下面的空隙高度，實(shí)際上是文字計(jì)算后的行高值和字母x下邊緣的距離。因此，只要行高足夠小，實(shí)際文字占據(jù)的高度的底部就會(huì)在x的上面，下面沒(méi)有了高度區(qū)域支撐，自然，圖片就會(huì)有容器底邊貼合在一起了。
div { line-height: 5px; }

4、line-height為相對(duì)單位，font-size間接控制

Font-size可以間接改變line-height的值，也起到消除空白節(jié)點(diǎn)的作用。

5、垂直居中

當(dāng)設(shè)置

div { line-height: 240px; }
img { vertical-align: middle; }

此時(shí)的頁(yè)面看似垂直居中，但是并沒(méi)有完全垂直居中。middle中線位置(字符x的中心)并不是字符內(nèi)容的絕對(duì)居中位置。兩個(gè)位置的偏差就是圖片近似居中的偏差。
解決方案即：將空白節(jié)點(diǎn)也進(jìn)行vertical-align:middle，但是直接操作不能實(shí)現(xiàn)，因此利用其他的方式,即 font-size:0

div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }

此時(shí)的垂直居中也就是真正的垂直居中。
這種通過(guò)line-height定高，元素vertical-align:middle垂直居中的方法不僅適用于現(xiàn)代瀏覽器，連IE7瀏覽器也是支持的。

6、一種很好的解決方式
div {
    display:flex;
    align-items:center;
}

align-items 屬性定義flex子項(xiàng)在 flex 容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。

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

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

相關(guān)文章

  • CSS元素垂直居中【內(nèi)含vertical-align 與 line-height 屬性詳解】

    摘要：所以文字最終可以在整個(gè)中垂直居中顯示。默認(rèn)值為，即把元素放在父元素的基線上。萬(wàn)萬(wàn)沒(méi)想到用兩行代碼就實(shí)現(xiàn)了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請(qǐng)一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個(gè)門 先來(lái)考慮這樣一個(gè)問(wèn)題：一行文字在一個(gè)固定高度的父div中怎樣做到垂直居中？我們都知道設(shè)置父div的line-height 等于它的height就可以了，像下面...

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

  • CSS元素垂直居中【內(nèi)含vertical-align 與 line-height 屬性詳解】

    摘要：所以文字最終可以在整個(gè)中垂直居中顯示。默認(rèn)值為，即把元素放在父元素的基線上。萬(wàn)萬(wàn)沒(méi)想到用兩行代碼就實(shí)現(xiàn)了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請(qǐng)一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個(gè)門 先來(lái)考慮這樣一個(gè)問(wèn)題：一行文字在一個(gè)固定高度的父div中怎樣做到垂直居中？我們都知道設(shè)置父div的line-height 等于它的height就可以了，像下面...

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

  • 水平居中、垂直居中、水平垂直居中、浮動(dòng)居中、絕對(duì)定位居中.......幫你搞定

    摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素絕對(duì)定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個(gè)元素？你會(huì)想到啥？這里面的知識(shí)還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素、絕對(duì)定位的居中。為了代碼簡(jiǎn)介，沒(méi)有加背景和其他樣式，需要看效果的，可以加上背景。 目錄： 第一...

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

  • 《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫(xiě)在前面在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見(jiàn)和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫(xiě)在前面 在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見(jiàn)和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...

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

  • CSS魔法堂：深入理解line-height和vertical-align

    摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒(méi)有任何變化。那改變又如何呢為了讓的清晰可見(jiàn)，特意添加一個(gè)的包裹著。 前言 一直聽(tīng)說(shuō)line-height是指兩行文本的基線間的距離，然后又說(shuō)行高等于行距，最近還聽(tīng)說(shuō)有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說(shuō)line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過(guò)本篇來(lái)一探究竟...

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

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

0條評(píng)論

閱讀需要支付1元查看
<