資訊專欄INFORMATION COLUMN
摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。
在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接
1. 適用元素vertical-align屬性只能適用于內聯元素( inline )、內聯塊元素( inline-block )和table-cell元素( td )，包括 display 屬性為 inline 、inline-block 和 table-cell 的元素。由于元素在浮動和絕對定位之后會自動轉換為塊元素( block )，所以浮動和絕對定位元素也沒有 vertical-align 屬性。
2. 取值關于文本的頂線、中線、基線和底線已經在介紹行高的文章中的配圖中解釋過了。
line box 的基線等于這一行中沒有經過任何人為對齊設置的文本的基線。
inline block 元素的基線位置，在css中規定是：
The baseline of an "inline-block" is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its "overflow" property has a computed value other than "visible", in which case the baseline is the bottom margin edge.
inline-block 元素的基線是這個元素下正常文檔流中最后一個 line box 的基線，除非這個元素中沒有正常流的 line box 或者本身的 overflow 屬性值不是默認的 visible ，這個時候 inline-block 元素的基線位置是margin的底邊緣。
以下是 w3c 中關于vertical-align取值的規定：
baseline: 默認值，盒子的基線與父級盒的基線對齊。如果這個盒子沒有基線，就讓這個盒子的 margin 底邊緣和父級盒基線對齊。
middle: 將盒子的垂直中心點與父級盒子基線往上 X 一半高度的位置對齊。
sub： 降低盒子的基線到父級盒合適的下標位置。
super： 提高盒子的基線到父級盒合適的上標位置。
text-top: 將盒子的頂部（top）與父級盒子內容區域的頂部對齊。
text-bottom: 將盒子的底部（bottom）與父級盒子內容區域的底部對齊。
%: 將盒子相對基線位置上移或下移多少位置（百分比的值時相對于行高 line-height ），" 0% "時位置與設置 baseline 一致。
數值： 將盒子相對基線位置上移或下移多少位置。0px 時位置與設置 baseline 一致。
top: 將盒子的頂部與行框 line box 的頂端對齊（行框的頂部就是這一行行內框的最高點）。
bottom: 將盒子的底端與 行框 line box 的底端對齊（行框的底端就是這一行行內框的最低點）。
以上前8個的取值是相對于盒子的父級盒子，后2個取值是相對于這一行的行框 line box 。從之前行高的文章我們知道了盒子的頂部與父級盒子內容區頂部的間距就是半行距，當盒子的字體大小等于 line-height 大小時，盒子和父級盒子的內容區域會重疊，也就是下面 demo 中 表示 text-top 和 text-bottom 的線會與表示 top 和 bottom 的線重合。
下面 demo 來自 Vertical-Align: All You Need To Know。便于理解各種取值之間的關系。
verrical-align 參考線模型
上面 demo 中，不同顏色的高度為 0 的線設置不同的 vertical-align 值，利用 margin-right 負值將所有的線和最后一個行塊放置在同一個行框 line box 中。
剛開始看到這個 demo 的時候，完全不清楚為什么這幾個寬度和父級一樣線能夠放在同一個行框中，了解之后知道是 margin 負值的作用， margin 負值的相關知識在文章最后。
demo 中的所有元素都處在同一個行框 line box 中，這幾根線表示這個行框的各個參考線。六個灰塊分別設置不同的 vertical-align 值來與父元素對齊。仔細觀察
基線對齊是子元素的基線和父元素的基線對齊，demo 中這個子元素的基線是末尾的X的下邊緣。
仔細測量居中對齊塊的上下距離之后我們會發現，這個塊并不是完全得居中對齊。這并不是 bug ，而是安全按照 w3c 的規定：“盒子的垂直中心點與父級盒子基線往上 X 一半高度位置對齊”， middle 參考線也穿過最左邊 X 的中心，而字符具有下沉特性，所以 X 的中心并不是字符所在行內框的中心點，也就不在整個行框的中心點。我們可以將 font-size 設為 0 來讓元素完全垂直居中。
4. 應用 4.1 單選框復選框或小圖標和文字的對齊對齊小圖標
由于 vertical-align 為 middle 并不能讓元素完全居中，會受到字體大小的干擾，在這種小圖標的對齊上使用 middle 會使得這種干擾更明顯，所以設置像素值讓小圖標相對于基線偏移的做法更準確一些。
查看 demo（測試發現預覽中的按鈕點擊無效，請直接點擊原鏈接測試）
上面 demo 中，當我們改變圖片的 vertical-align 屬性值時，發現整個行框的基線位置也發生了變化。這是因為這個行框中最高點和最低點都在圖片上，所以行框的高度就等于這個圖片的高度，當圖片的 vertical-align 值發生變化時，行框內沒有足夠的空間可以讓圖片移動，所以只能移動基線。
而且當圖片的 vertical-align 值設置為 middle 時，圖片并沒有在父級中垂直居中，這是因為圖片只是在所在行框中近似垂直居中，要想讓圖片在父級中居中，可以讓行框的高度等于父級盒子的高度。也就是可以讓父級的 line-height 等于高度。
圖片垂直居中
字體大小設置為 0 是讓元素完全垂直居中
在上面的例子中，有沒有文本標簽都沒有區別，我們可以看做父級盒子中有一個空白的文本節點來作為基線位置的參考。
方法2鏈接描述
上面 demo 的方法創建一個高度為 100% 的偽元素（空元素也可以），這樣這個元素的基線就會和父級的基線重合，空元素的垂直中心點也與父級的中心重合，圖片也會垂直居中。
文本垂直居中
垂直居中文本的方法和圖片的方法差不多，文本標簽 inline-block 化，然后按照居中圖片的方法來居中。其中需要注意的是父級元素設置 font-size 為 0 ，這是為了消除偽元素（或者空元素）與文本標簽之間的間隙，如果這個間隙存在，那么這個偽元素會換行，不和文本元素在同一個行框中，垂直居中就會失效。
margin 的四個取值中，本質上雖然都是在和其他元素之間產生間距，但實現的方法卻不一樣。其中 left 和 top 值是相對相鄰元素的邊界改變自己的位置，而 right 和 bottom 是相對元素本身位置來影響周邊元素的位置（實際上是影響右邊和下邊相鄰元素的參考線）。
當 margin 值為正值時，會按照正常邏輯向元素四周產生間距。當元素的 margin-left 和 margin-top 為負值時，元素會向左或向上移動，當元素的 margin-right 和 margin-bottom 為負值時，元素右邊和下邊的元素的參考線位置會變化。
上面的 demo 中，六條參考線的寬度都與父元素一致，所以默認會處在六個不同的行框 line box 中。但給他們都設置了 margin-right 負值，這個負值足夠小的話，會將下一行的元素拉上來。
正常情況下 margin-right 的值等于負的元素寬度就可以實現，不過六個 inline-block 元素之間默認會有間隙，我們可以把代碼寫成一行來避免這個間隙的出現，不過可讀性就比較差，這個間隙的大小默認是和父元素的字體大小有關的，也可以把父元素 font-size 設為 0 來消除間隙，不過這樣就會導致幾根參考線重合，影響表達效果。所以上面 demo 中線元素的 margin-right 值的絕對值都稍大于元素的寬度，這是為了抵消正常流中 inline-block 元素之間的間隙。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116438.html
摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。 在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...
摘要：方法二利用，設置元素結構，并應用實現垂直居中，這種方法的實現可用于多行文本，要求及以上版本。 讓元素居中對齊是非常常見的需求，首先是水平居中，要實現水平居中行內元素只需要在其父元素上設置text-align: center即可，對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發...
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...
摘要：垂直居中當設置此時的頁面看似垂直居中，但是并沒有完全垂直居中。中線位置字符的中心并不是字符內容的絕對居中位置。這種通過定高，元素垂直居中的方法不僅適用于現代瀏覽器，連瀏覽器也是支持的。 今天在寫樣式時，icon和文字都進行了垂直居中的處理，但是icon并沒有垂直居中，后來發現由于 line-height 和 vertical 一起使用導致與預期樣式不同，特此對 vertical-ali...
摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細分，還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個元素？你會想到啥？這里面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細分，還要分浮動元素、絕對定位的居中。為了代碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。 目錄： 第一...
閱讀 2528·2021-10-12 10:12
閱讀 1707·2019-08-30 15:52
閱讀 2443·2019-08-30 13:04
閱讀 1734·2019-08-29 18:33
閱讀 961·2019-08-29 16:28
閱讀 451·2019-08-29 12:33
閱讀 2057·2019-08-26 13:33
閱讀 2360·2019-08-26 11:36
