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

資訊專欄INFORMATION COLUMN

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

ybak / 1596人閱讀

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

今天在寫樣式時，icon和文字都進行了垂直居中的處理，但是icon并沒有垂直居中，后來發現由于 line-height 和 vertical 一起使用導致與預期樣式不同，特此對 vertical-align 總結進行！

vertical 支持很多屬性：

/*  關鍵字值  */
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;

當 vertical-align 和 line-height 同時出現時出現樣式差異是由于：vertical-align的百分比值不是相對于字體大小或者其他什么屬性計算的，而是相對于line-height計算的。

1、現象

Div內包裹一個img標簽，給div添加背景發現div下部分多出一部分留白空間，這個現象就是由于vertical-align和line-height共同起作用的原因。
對于內聯元素，vertical-align與line-height雖然看不見，但實際上「到處都是」！

2、幽靈空白節點

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

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

圖片默認是inline水平的，而vertical-align對塊狀水平的元素無感。因此，我們只要讓圖片display水平為block就可以了，我們可以直接設置display或者浮動、絕對定位等
給img標簽添加display:block樣式，將img變為塊級元素發現問題消失了。

2、使用其他vertical-align值

不用baseline，使用其他的屬性值，比如：middle、top、bottom
lign屬性后空白節點消失。

3、修改line-height的值

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

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

Font-size可以間接改變line-height的值，也起到消除空白節點的作用。

5、垂直居中

當設置

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

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

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

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

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

align-items 屬性定義flex子項在 flex 容器的當前行的側軸（縱軸）方向上的對齊方式。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117513.html

相關文章

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

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

    frontoldman 評論0 收藏0

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

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

    Sanchi 評論0 收藏0

  • 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

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

    waterc 評論0 收藏0

  • 《CSS世界》筆記三：內聯元素與對齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

    HtmlCssJs 評論0 收藏0

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

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

    avwu 評論0 收藏0

發表評論

0條評論

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