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

資訊專欄INFORMATION COLUMN

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

ybak / 1609人閱讀

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

今天在寫樣式時(shí)，icon和文字都進(jìn)行了垂直居中的處理，但是icon并沒有垂直居中，后來發(fā)現(xiàn)由于 line-height 和 vertical 一起使用導(dǎo)致與預(yù)期樣式不同，特此對 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;
/*  <長度> 值  */
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的百分比值不是相對于字體大小或者其他什么屬性計(jì)算的，而是相對于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共同起作用的原因。
對于內(nèi)聯(lián)元素，vertical-align與line-height雖然看不見，但實(shí)際上「到處都是」！

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

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

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

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

2、使用其他vertical-align值

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

3、修改line-height的值

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

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

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

5、垂直居中

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

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

此時(shí)的頁面看似垂直居中，但是并沒有完全垂直居中。middle中線位置(字符x的中心)并不是字符內(nèi)容的絕對居中位置。兩個(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í)的垂直居中也就是真正的垂直居中。
這種通過line-height定高，元素vertical-align:middle垂直居中的方法不僅適用于現(xiàn)代瀏覽器，連IE7瀏覽器也是支持的。

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

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

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

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

相關(guān)文章

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

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

    frontoldman 評論0 收藏0

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

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

    Sanchi 評論0 收藏0

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

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

    waterc 評論0 收藏0

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

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

    HtmlCssJs 評論0 收藏0

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

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

    avwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<