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

資訊專欄INFORMATION COLUMN

[譯]關(guān)于垂直居中 Vertical Align 的探討

lscho / 2463人閱讀

摘要：為子元素設(shè)置屬性和，令子元素的頂部在縱向上與父元素中間的位置對齊。為子元素設(shè)置屬性，其中為子元素高度值的一半，相當(dāng)于再將子元素向上移動其本身高度的一半距離，這樣就可以令其垂直居中了。

原文出處：Understanding vertical-align, or "How (Not) To Vertically Center Content"

“如何垂直居中某個元素”，以及“vertical-align: middle; 為什么不起作用”，是兩個很常見的問題，究其原因，要分為下面三點來講述：

HTML 的布局本是為水平方向的排版來設(shè)計的，內(nèi)容都是根據(jù)指定的寬度以及該寬度下所對應(yīng)的高度（設(shè)置了高寬比）來顯示的。所以，水平方向上的尺寸調(diào)整和布局輕而易舉，而垂直方向上的則要以水平方向為準(zhǔn)。

vertical-align: middle; 之所以不起作用，是因為使用者并沒有真正理解它，但是……

使用者之所以沒有理解這個屬性，是因為 CSS 定義就把這事兒弄砸了——在不同的應(yīng)用環(huán)境中，它會表現(xiàn)出兩種不同的結(jié)果。

應(yīng)用于表格單元格的 vertical-align

這個屬性應(yīng)用于表格單元格時，通常都能得到我們想要的結(jié)果，該屬性模擬的是已經(jīng)棄用的舊屬性 valign。在支持新標(biāo)準(zhǔn)的現(xiàn)代瀏覽器中，下面三行語句實現(xiàn)的效果是一樣的：

  
 ... 

 ...
應(yīng)用于行內(nèi)元素的 vertical-align

當(dāng)這個屬性應(yīng)用于行內(nèi)元素時，它的表現(xiàn)形式與已經(jīng)棄用的、應(yīng)用于 元素的舊屬性 align 相同。在支持新標(biāo)準(zhǔn)的現(xiàn)代瀏覽器中，下面三行語句實現(xiàn)的效果是一樣的：



 foo
bar
應(yīng)用于其它元素的 vertical-align

從技術(shù)上來講，其它元素沒有該屬性。當(dāng)新手給普通的塊狀元素（比如

）分配該屬性時，大部分瀏覽器會給這個塊狀元素的所有行內(nèi)子元素設(shè)置該屬性的值為 inherit。

如何使元素垂直居中？ 方法一

要實現(xiàn)垂直居中，需要滿足兩個前提條件：

要設(shè)置垂直居中元素的高度，并且為其再添加一個父級塊元素（也需設(shè)置高度，這點原文未作說明）。

對內(nèi)容塊設(shè)置絕對定位不會出現(xiàn)問題。（一般來說都沒什么問題，因為父級的塊元素還是處在正常的文檔流中的。）

如果能夠滿足以上兩點，那么可以通過以下幾步設(shè)置來實現(xiàn)元素的垂直居中：

設(shè)置父容器的屬性為 position: relative or position: absolute。

為垂直居中的子元素設(shè)置一個固定的寬度。

為子元素設(shè)置屬性 position:absolute 和 top:50%，令子元素的頂部在縱向上與父元素中間的位置對齊。

為子元素設(shè)置屬性 margin-top:-yy，其中 yy 為子元素高度值的一半，相當(dāng)于再將子元素向上移動其本身高度的一半距離，這樣就可以令其垂直居中了。

下面是示例代碼：


...


  

    
Hey look! I"m vertically centered!

    
How sweet is this?!
方法二

這個方法也需要滿足兩個前提條件：

要被居中的文本只有一行。

可以為（文本所屬的）父元素（如

）設(shè)置定寬。

滿足上面的前提條件之后，只需再加一步即可實現(xiàn)垂直居中：

為父元素設(shè)置合理的寬度。

下面是示例代碼：


...


  Hey, this is vertically centered. Yay!

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

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

相關(guān)文章

  • [譯]CSS 居中（Center）方法大合集

    摘要：并排顯示，要求相同高度如果要求多個塊級元素并排居中且高度相同，則要為其父元素設(shè)置屬性。成一列顯示如果只是需要讓多個塊級元素整體水平居中，并且按默認的方式縱向排列，那直接設(shè)置左右邊距為即可。 原文出處：Centering in CSS: A Complete Guide 本文只給出了不同條件下的實現(xiàn)方式，未對原理做探討。PS：原來要顯示 jsfiddle 和 CodePen 之類網(wǎng)站的代...

    wayneli 評論0 收藏0

  • vertical-align 簡明指南

    摘要：部分樣式代碼總結(jié)因為用的不多其他對齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動 float、position:absolute、 來解決, 不過文檔流都會受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...

    MSchumi 評論0 收藏0

  • vertical-align 簡明指南

    摘要：部分樣式代碼總結(jié)因為用的不多其他對齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動 float、position:absolute、 來解決, 不過文檔流都會受到影響。筆者常用的是 flex, 用起來順手, 有些地方用起來感覺小題大做, 于是就來探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...

    wqj97 評論0 收藏0

  • 從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討

    摘要：從一個內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素，它指定元素行盒的最小高度。對于非替代的元素，它用于計算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。 從一個內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言 line-height這個屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時候碰到過一個該屬性相關(guān)的...

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

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