[譯]關于垂直居中 Vertical Align 的探討

lscho 發布于2019-08-30 13:04 / 2458人閱讀

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

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

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

HTML 的布局本是為水平方向的排版來設計的，內容都是根據指定的寬度以及該寬度下所對應的高度（設置了高寬比）來顯示的。所以，水平方向上的尺寸調整和布局輕而易舉，而垂直方向上的則要以水平方向為準。

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

使用者之所以沒有理解這個屬性，是因為 CSS 定義就把這事兒弄砸了——在不同的應用環境中，它會表現出兩種不同的結果。

應用于表格單元格的 vertical-align

這個屬性應用于表格單元格時，通常都能得到我們想要的結果，該屬性模擬的是已經棄用的舊屬性 valign。在支持新標準的現代瀏覽器中，下面三行語句實現的效果是一樣的：

  
 ... 
 ...

應用于行內元素的 vertical-align

當這個屬性應用于行內元素時，它的表現形式與已經棄用的、應用于元素的舊屬性 align 相同。在支持新標準的現代瀏覽器中，下面三行語句實現的效果是一樣的：



 foo
bar

應用于其它元素的 vertical-align

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

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

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

要實現垂直居中，需要滿足兩個前提條件：

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

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

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

設置父容器的屬性為 position: relative or position: absolute。

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

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

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

下面是示例代碼：


...

  
    Hey look! I"m vertically centered!
    How sweet is this?!

方法二

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

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

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

）設置定寬。

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

為父元素設置合理的寬度。

下面是示例代碼：

...

Hey, this is vertically centered. Yay!

GPU云服務器云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

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

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

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

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

wayneli 2019-08-30 13:04 評論0 收藏0
vertical-align 簡明指南

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

MSchumi 2019-08-02 15:29 評論0 收藏0
vertical-align 簡明指南

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

wqj97 2019-08-30 11:19 評論0 收藏0
從一個內聯元素布局引發對line-height的探討

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

seal_de 2019-08-02 15:37 評論0 收藏0