【翻译】关于vertical-align所有你需要知道的
本文是翻譯過來的，如果有不對的地方還請指教~，原文鏈接：Vertical-Align: All You Need To Know
前面一些說明，可以略過不看吧
我經(jīng)常需要對元素進行垂直方向上的布局。
CSS提供了一些方法來實現(xiàn)這個功能，比如float，position: absolute，手動地增加margin或padding。
我并不是很喜歡這些方法。Floats只能讓元素在頂端布局，而且需要手動清除浮動。absolute定位讓元素離開文檔流，且不再影響它的周圍環(huán)境。利用固定的margigin和padding會讓布局不夠靈活。
但還有另一個方法：vertical-align。我想它應該得到更多的信任。技術上，使用vertical-align來布局是一個hack。因為，它不是為此而設計的。它主要是用來布局文本和文本旁的元素。當然，你也可以在不同的上下文中用vertical-align來靈活地布局元素。該方式下，元素的大小不需要被知道，元素在文檔流中，其它元素可以對它的改變做出相應改變。
古怪的vertical-align
vertical-align有時很奇怪。使用它有時會讓人沮喪。比如，對于有些元素設置vertical-align后它會有影響，但是有些卻不會。我仍然在vertical-align的黑暗中一次又一次摸索。
不幸的是，大多數(shù)的分析比較表面。尤其是如果我想用vertical-align進行布局。他們主要關注解釋嘗試利用vertical-align來布局一個元素中所有元素是一個錯誤。他們給出了vertical-align的基本介紹，并說明在一些簡單情況下元素如何布局。但是，他們沒有解釋tricky的部分。
所以，我把這篇文章的目標設置為：一次性完全地闡明vertical-align的行為。通過學習W3C CSS規(guī)范以及一些實例得到這篇文章。
正文開始——
一、哪些元素可以使用vertical-align
vertical-align是用于inline級元素。這些元素的display屬性為：
- inline：包裹文本的基本標簽
- inline-block：塊元素以inline方式呈現(xiàn)。它們可以設置寬度和高度，也可以設置padding、border和margin
- inline-table（在本文中沒有考慮）
inline級元素分布在一個行中。如果元素過多在一行中放不下時，那么一個新行就會在下面被創(chuàng)建。所有這些行都叫做line盒子，它包裹了這一行中的所有內(nèi)容。不同的內(nèi)容大小意味著line盒子有不同的高度。下圖用紅線標出line盒子的頂邊和底邊。?
line盒子會勾勒出在其中內(nèi)容的輪廓。在這些line盒子中，vertical-align用于對一個獨立的元素進行布局。
二、基線baseline和外邊緣outer-edge
垂直布局的最重要的關鍵點是它包含的元素的基線。在有些情況下，包裹元素的line盒子的頂邊和底邊也很重要。讓我們來看看不同元素類型的基線和外邊緣。
-
inline元素
圖中線的標識說明：紅線：line height頂邊和底邊；綠線：字體font的高度font-size（=基線上方的高度+基線下方的深度）；藍線：基線
| line-height = font-size的高度 | line height = font-size的2倍 | line height = font-size的一半 |
inline元素的外邊緣讓元素布局在line的頂邊和底邊之間。如果line-height小于font的高度，這就不重要了。所以，外邊緣就是圖中的紅線。
inline元素的基線是字符所在的位置。就是圖中的藍線。粗略地說，就是字體高度的中間的下方。
-
inline-block元素
元素盒子模型：紅線：外邊距margin；黃色：border，綠色：padding，藍色：內(nèi)容區(qū)域；藍線：inline-block元素的基線
inline-block元素的外邊緣是它的margin的頂邊和底邊，就是上圖中的紅線。
inline-block元素的baseline依賴于元素是否包含處于在正常流中的內(nèi)容
| inline-block元素中一個字符c inline-block元素的baseline為正常流中的 最后一個內(nèi)容元素的baseline | inline-block元素中一個字符c，且overflow: hidden inline-block元素的baseline為盒子margin的底邊 | inline-block元素中沒有內(nèi)容，但是為內(nèi)容區(qū)域設置了寬高 inline-block元素的baseline為盒子margin的底邊 |
-
line盒子
text盒子在line盒子中，它的頂邊和底邊由圖中綠色標識。這個text盒子可以看作是一個line盒子中沒有任何布局的inline元素。它的高度與父元素的font-size高度對應。因此，text盒子就是包含line盒子中未格式化的文本。也就是圖中的綠色部分。因為，text盒子與baseline是綁定在一起，當baseline移動時它也會隨著移動。
對文本元素用灰色進行標亮
line盒子頂邊與最上面元素的頂邊一致，line盒子底邊與最下面元素的底邊一致。它是由紅線標識。
line盒子的基線由藍線標識。因為line盒子的基線是不可見的，可能不是很明顯看到baseline在哪。但是，你可以在line的開頭添加一個字符，比如圖中的X，如果這個元素沒有用任何方法布局，那么它默認在baseline上。
CSS 2.1 does not define the position of the line box's baseline.
這可能是最令人疑惑的部分。這意味著，baseline被放置在需要滿足其它條件如vertical-align以及最小化line盒子的高度。
總結兩點
- line盒子，它是垂直布局發(fā)生的位置。它有baseline，text盒子，頂邊，底邊
- inline級元素。它們是被布局的對象。它們有baseline，頂邊和底邊（font-size）
三、vertical-align的值
vertical-align不同的設置值相對于不同的元素
默認值為baseline
- 根據(jù)line盒子的baseline分布元素的baseline
| baseline | sub | super | <percentage> | <length> |
| 與line盒子baseline重合 | line盒子baseline下 | line盒子baseline上 | 相對于line-height的大小 | 絕對長度 |
- 根據(jù)line盒子的baseline分布元素的外邊緣
middle：元素頂邊、底邊的中點是在（line盒子baseline+X高度一半）位置
- 根據(jù)line盒子的text盒子分布元素的外邊緣
text-top：元素的頂邊與line盒子的text盒子的頂邊重合
text-bottome：元素的底邊是line盒子的text盒子的底邊重合
- 根據(jù)line盒子的外邊緣分布元素的外邊緣
top：元素的頂邊和line盒子的頂邊重合
bottom：元素的底邊和line盒子的底邊重合
?四、為什么vertical-align以這種方式來呈現(xiàn)？（幾個實例）
-
讓一個icon和文本都垂直居中
| Centered? ?沒有設置樣式，默認在基線上 因為取的是小寫字母x的高度，而C是大寫， 所以Centered?看起來并沒有垂直居中 | 對Centered!設置垂直居中 |
-
line盒子基線移動
為了滿足vertical-align的布局設置，line盒子的基線會自動發(fā)生移動
-
-
情形一
-
| 兩個元素一高一矮，矮的不設置分布，默認在baseline上 高的設置text-bottom | 兩個元素一高一矮，矮的不設置分布， 默認在baseline上 高的設置text-top， 而text盒子是在baseline周圍， 為了讓高的能實現(xiàn)text-top布局， 所以需要讓baseline上移 |
-
- 情形二
| 高：vertical-align: top ? 矮：默認 | 高：vertical-align: bottom? 矮：默認 雖然設置的是相對于line盒子的top， 基線也會上移 |
-
- 情形三
| ? | ||
| 兩個較高的元素， 一個text-top，一個text-bottom | 增加第三個元素，設置為middle 該元素沒有超過line盒子的邊界，故 對baseline位置和line盒子高度沒有影響 | 增加第三個元素，設置為vertical-align: 100% 左圖是原文的，右圖是自己實現(xiàn)的，好像有點不太一樣 黃色部分元素x的基線應該在line盒子基線上line盒子高度的100% |
- inline級元素底部有小間隙
比如布局一個li列表，這是由于baseline底部會留一些空間來放置文本的下行部分
<ul><li class="box"></li><li class="box"></li><li class="box"></li> </ul><style type="text/css">.box { display: inline-block;/* size, color, etc. */ } </style> View Code解決方案：讓這些元素設置成vertical-align
<ul><li class="box middle"></li><li class="box middle"></li><li class="box middle"></li> </ul><style type="text/css">.box { display: inline-block;/* size, color, etc. */ }.middle { vertical-align: middle; } </style> View Code這種情形不會在有文本內(nèi)容的inline-block元素中發(fā)生，因為內(nèi)容已經(jīng)把baseline移到上方
-
inline級元素水平方向的間隙會破壞布局
兩個inline-block寬度都設置為50%，且html中有換行符，那么導致這兩個元素間會有一個間隙，一行放不下它們，第二個元素會被放在第二行
<!-- left mark-up --> <div class="half">50% wide</div> <div class="half">50% wide... and in next line</div><!-- right mark-up --><div class="half">50% wide</div><!-- --><div class="half">50% wide</div><style type="text/css">.half { display: inline-block;width: 50%; } </style> View Code- span和input
?
五、讓vertical-align不再神秘！
當vertical-align并不如你所相像地那樣表現(xiàn)，那么請考慮以下兩個問題：
- line盒子的baseline、頂邊、底邊在哪？
- 內(nèi)聯(lián)級元素的baseline、頂邊、底邊在哪？
?我的個人總結（非翻譯）
- 文本只根據(jù)line-height來進行布局：垂直居中（父子中大的line-height）
- line-height和height總是取較大的值
- 文本的line-height和height再小也會讓文本顯示
- 先根據(jù)line-height進行布局，height變到很小的時候，文本的下方區(qū)域會變小，直到文本底邊，上方區(qū)域不變
轉(zhuǎn)載于:https://www.cnblogs.com/coolqiyu/p/7292564.html
總結
以上是生活随笔為你收集整理的【翻译】关于vertical-align所有你需要知道的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分类（category）是门学问
- 下一篇： 拍拍贷不还会上征信黑名单吗