深入理解css中vertical-align屬性
我要評論一、為什么要寫這篇文章
今天看到一個問題：
兩個div 都設(shè)置 display：inline-block，正常顯示；但是在第二個div中加一個塊級元素或者內(nèi)聯(lián)元素，顯示就變了個樣，為什么？
<meta charset="utf-8"/>
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
display: inline-block;
}
.align{
/* vertical-align: top;*/
}
</style>
<body>
<div>
</div>
<div class="align">為什么？</div>
</body>
解決方案就是給第二個div加上：vertical-align:top。
關(guān)于vertical-align和基線我知道一點，但是這個問題我沒能答出，所以學(xué)習(xí)總結(jié)分享一下。
二、vertical-align干什么的？
w3c有一段相關(guān)信息如下：
'vertical-align' Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Initial: baseline Applies to: inline-level and 'table-cell' elements Inherited: no Percentages: refer to the 'line-height' of the element itself Media: visual Computed value: for <percentage> and <length> the absolute length, otherwise as specified
可以看到vertical-align影響inline-level元素和table-cell元素垂直方向上的布局。根據(jù)MDN描述，vertical-align對::first-letter和::first-line同樣適用。
適用于：
inline水平的元素
inline:<img>,<span>,<strong>,<em>,未知元素
inline-block:<input>(IE8+),<button><IE8+>....
'table-cell'元素
table-cell:<td>
所以默認情況下，圖片，按鈕，文字和單元格都可以用vertical-align屬性。
取值：
三、baseline
1、字母‘x’與baseline
字母x的下邊緣（線）就是基線。不是字母s之類下面有尾巴的字母
基線甚至衍生出了：
1.“alphabetic” baseline: “字母”基線 – 英文
2.“hanging” baseline: “懸掛”基線 – 印度文
3.“ideographic” baseline: “表意”基線 – 中文
2、baseline的確定規(guī)則
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素【line box】的baseline是最后一個inline box 的baseline。
3、inline-block元素的baseline確定規(guī)則
規(guī)則1：inline-block元素，如果內(nèi)部有l(wèi)ine box，則inline-block元素的baseline就是最后一個作為內(nèi)容存在的元素[inline box]的baseline，而這個元素的baseline的確定就要根據(jù)它自身來定了。
規(guī)則2：inline-block元素，如果其內(nèi)部沒有l(wèi)ine box或它的overflow屬性不是visible，那么baseline將是這個inline-block元素的底margin邊界。
3、例子：inline-block例子
上圖描述：
上圖中從左到右都是line-block元素，紅線代表margin-box的邊界，藍線代表baseline；黃色為border，綠色為padding，藍色為content。
左邊元素包含著沒有脫離正常流的內(nèi)容c，中間元素除了沒有脫離正常流的內(nèi)容c外還增加了overflow:hidden，右邊元素沒有內(nèi)容，但是內(nèi)容區(qū)有寬高。
分析圖中各種情況inline-block元素的baseline：
上圖左圖，inline-block元素有處于正常流的內(nèi)容，根據(jù)規(guī)則1，所以inline-block的baseline就是最后一個作為內(nèi)容存在的元素的baseline，也就是內(nèi)容c的baseline，而c的baseline根據(jù)自身定，就是圖中藍色。
上圖中圖，inline-block元素overflow:hidden不為visible，根據(jù)規(guī)則2，該inline-block元素baseline就是inline-block元素的margin-box的下邊界了，即圖中藍線。
上圖右圖，inline-block元素沒有內(nèi)容，根據(jù)規(guī)則2，所以其baseline為margin-box的下邊界，即藍線。
4、例子：baseline確定規(guī)則例子
舉例：
<style type="text/css">
.ctn-block{
display: block;
background-color: #bbb;
line-height: 200px;
font-size: 50px;
}
.ctn-block .child1{
display: inline-block;
width: 100px;
height: 100px;
margin:10px 0;
vertical-align: baseline;
background-color: aliceblue;
}
</style>
<div class="ctn-block">
<div class="child1"></div>
<span>Gg</span>
</div>
分析：
父元素.ctn-block的base-line是Gg的baseline，
inline-block元素因為沒有內(nèi)部line box，也沒有設(shè)置overflow:visible，所以其baseline是底margin邊界。
四、vertical-align基于baseline的不同取值
1、baseline
將子元素盒子的baseline與父盒子的baseline對齊。
2、middle
將元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊
這里元素盒子的垂直中點容易確定，父盒子的baseline也好確定，但是x-height要進行計算得到，這個x-height就是字母x的高度。
3、text-top
將盒子的頂端(margin-top邊界)與父盒子的文本區(qū)域頂端對齊
審查盒子看到margin-top的頂端。
審查文本，看到藍色區(qū)域的上邊界就是文本區(qū)域頂端。
最終效果就是盒子的頂端與父盒子文本區(qū)域頂端對齊。
4、text-bottom
將盒子的底端（margin-bottom邊界） 與父盒子的文本區(qū)域底端對齊
和text-top類似，不過將子元素的margin-bottom和文本區(qū)域的下邊界對齊。
5、sub
將子元素盒子的baseline降低，到適當(dāng)?shù)母负凶拥南聵?biāo)位置
子元素的baseline已經(jīng)確定了，就是margin-bottom下邊界，但是父盒子的下標(biāo)位置太不好理解。。。首先需要了解下標(biāo)這個概念，我們可以通過<sub>標(biāo)簽為文字添加下標(biāo)，將<span>中的內(nèi)容修改為Gg<sub>Gg</sub>，就會有如下效果。
這里就是將元素的margin-bottom下邊界和下標(biāo)的baseline對齊。
6、super
將元素盒子的baseline升高，到適當(dāng)?shù)母负凶拥纳蠘?biāo)位置。
與sub對應(yīng)，super提升到上標(biāo)內(nèi)容的baseline處，首先通過<sup>標(biāo)簽創(chuàng)建上標(biāo)。
7、percentage
百分比：升高（正值）或降低（負值）子元素盒子，具體的升高/降低數(shù)值由父盒子的line-height的值乘以百分比計算得出。如果百分比為0%，就和vertical-align:baseline一樣。
這個是相當(dāng)好理解的，就相當(dāng)于子元素盒子的baseline升高或降低，具體數(shù)值為百分比乘以父盒子的line-height。
本例中，父盒子的line-height為200px，所以設(shè)定25%，元素應(yīng)該上移50px。
并不是很直觀，給它加上一個transform: translate(0, 50px);【相對下移50px】，它又移到那個熟悉的位置了。
8、length
升高（正值）或降低（負值）子元素盒子。值為升高/降低的距離，如果為0，和vertical-align:baseline一樣。
以我們最常用的px作為單位，設(shè)定vertical-align:50px，效果就和上面百分比為25%（200px*25%=50px）一樣了，不做例子了。
五、vertical-align基于line box的不同取值
當(dāng)vertical-align設(shè)置為top和bottom時，其就不是按照baseline進行定位了，而是根據(jù)line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。
1、top
將子元素盒子的頂部和其所在的line box頂部對齊
由于vertical-align:top將會讓子元素盒子頂部與line box頂部對齊，而如果line box高度小于子元素高度，line box將會被撐開。我們先用一個高度較高的元素撐開line box，然后看看效果：
可以看到，big子元素撐開了line box，而child1的margin-top外邊界緊貼在line box的頂端。
2、bottom
將子元素盒子的底部和其所在的line box底部對齊
和top類似，由于big用于撐開line box，可以不必修改其vertical-align的值，僅修改child1為vertical-align:bottom，效果：
六、inline元素下方可能會有一點空隙
例子：嘗試將li元素在垂直方向上進行對齊的話，這個現(xiàn)象非常常見
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
background-color: bisque;
}
.box { display: inline-block;
width: 100px;
height: 100px;
background-color: aliceblue;
/* vertical-align: middle;*/
}
</style>
</head>
<body>
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</body>
</html>
1、垂直空隙
因為li元素默認vertical-align:baseline，而baseline的下方會給字母的一部分留出空間，因此會產(chǎn)生一個空隙，要產(chǎn)生理想的效果，解決方案就是改變line box的baseline位置，比如將這些li設(shè)置為vertical-align:middle?！総ip:加一個x效果更明顯】
2、水平空隙
li元素的水平空隙是因為換行引起的，這個換行會變成一個空白，這個空白會被解析為DOM中的文本節(jié)點。比如像下面醬紫的代碼。
<ul> <li class="box"></li><li class="box"></li> <li class="box"></li> </ul>
效果如下：因為前2個li之間沒有空白，而2和3個li之間有空白。
但是上面的代碼可讀性太差，也不美觀，一般這樣寫
<ul>
<li class="box"></li><!-- 注釋去空格
--><li class="box"></li>
<li class="box"></li>
</ul>
我們用一個注釋節(jié)點代替空白（文本節(jié)點），而注釋節(jié)點渲染的時候是不渲染的。了解更多DOM中的節(jié)點類型，可看我的另一篇文章《DOM》。
七、vertical-align:middle讓元素下移而不居中的問題分析
1、問題
現(xiàn)在有三個inline-box塊，高度分別為100px，200px，300px，想讓高度為100px的塊垂直居中，于是寫出了如下代碼：
<style type="text/css">
.ctn-block{
background-color: #bbb;
}
.ctn-block .child {
display: inline-block;
width: 100px;
background-color: aliceblue;
}
.ctn-block .child-1 {
height: 100px;
/* vertical-align: middle;*/
}
.ctn-block .child-2 {
height: 200px;
}
.ctn-block .child-3 {
height: 300px;
}
</style>
<div class="ctn-block">
<div class="child child-1"></div>
<div class="child child-2"></div>
<div class="child child-3"></div>
</div>
給中間div加上vertical-align:middle，效果變?yōu)樯蠄D二的樣子——child-1元素下移了，但是卻沒有居中。
2、原因
從上面可以指定，vertical-align:middle的定位方式是：將子元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊。
子元素盒子的中點很好算，而父盒子的baseline加上父盒子的x-height一半位置又是什么呢？
首先計算父盒子的baseline：三個子元素的baseline走在一條直線上，就是child-2和child-3的底部。
然后加上父盒子的x-height：由于chrome下默認font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px，綜上，按照如下方式對齊：
3、 解決方案
一種方式是將最高的元素設(shè)為vertical-align:middle。
然后將想要居中的也設(shè)定為vertical-align:middle，其他的根據(jù)需要設(shè)定vertical-align:top/bottom。
原理有點抽象：
首先明確一點：最高元素設(shè)定為vertical-align:middle后，這個元素對于line box來說，baseline就是其中線。
其他元素設(shè)置vertical-align:top/bottom后，它們不影響line box的baseline，所以再將需要設(shè)定垂直居中的元素也設(shè)定為vertical-align:middle，它們的baseline必然在最高元素的baseline之上，所以會會被強制下移，進行居中。
.ctn-block .child-1 {
height: 100px;
vertical-align: middle;
}
.ctn-block .child-2 {
height: 200px;
vertical-align:top;
}
.ctn-block .child-3 {
height: 300px;
vertical-align: middle;
}
4、衍生的一種可行的垂直居中方案
為父元素設(shè)定一個偽元素：：after,其高度為父元素的高度，display:inline-block,將其設(shè)定為vertical-align:middle即可撐開line box，同時line box的baseline為父元素高度一半的位置。然后設(shè)定子元素vertical-align:middle，即可實現(xiàn)居中。
考慮兼容性的話，這里需要使用一些hack，由于IE8不支持::after偽元素，所以需要一個span來替代。而display:inline-block亦需要hack。
八、其他應(yīng)用
ico和文字對齊
<style type="text/css">
.pop-viphead-nologinbox {
width:500px;
}
.pop-viphead-nologin-icon {
display:inline-block;
width: 14px;
height: 14px;
background: url("images/not_login_tip_ico.png") no-repeat;
}
.pop-viphead-nologin-txt {
display: inline-block;
color: #333;
font-size: 12px;
margin-left:2px;
}
.pop-viphead-nologin-btn {
display: inline-block;
margin-left: 3px;
}
.pop-viphead-nologin-btn a {
display: block;
width: 76px;
height: 25px;
line-height: 25px;
color: #fff;
text-align: center;
background-color: #00adee;
border-radius: 1px;
font-size: 12px;
}
</style>
<div class="pop-viphead-nologinbox">
<div class="pop-viphead-nologin-icon"></div>
<span class="pop-viphead-nologin-txt">您還沒有登錄哦！</span>
<div class="pop-viphead-nologin-btn"><a href="javascript:;" j-delegate="login">立即登錄</a></div>
</div>
我想讓左邊ico和文字，按鈕都對齊。
.pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{
vertical-align: middle;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要給大家介紹了關(guān)于css中text-overflow屬性與文本截斷的相關(guān)資料，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，希望本文的內(nèi)容對各位前端開發(fā)者們能帶一定的幫助，2017-06-04
css3基于animation屬性實現(xiàn)的人物動畫特效源碼
這是一款css3基于animation屬性實現(xiàn)的人物動畫特效源碼。主要基于animation的background-position屬性實現(xiàn)的人物動畫效果，沒有引入任何外部js元素2017-05-17- 本文總結(jié)了30個CSS3選擇器,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-13
最近微軟宣布Edge瀏覽器支持CSS自定義屬性，雖然表面上看起來并沒有太多改變，但其實卻是一個新的原始值類型，允許跨CSS屬性完全級聯(lián)變量，直接通過JavaScript進行交互，詳2017-03-27- 前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動的?？珊唵卫斫鉃槎x背景圖片隨滾動軸的移動方式2017-03-08
css 背景固定樣式background-attachment屬性基礎(chǔ)
這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動,需要的朋友可以參考下2017-03-08
在這篇文章中，我將介紹5個相對較新的CSS屬性，本文的目的是帶領(lǐng)你總覽這些CSS的屬性，告訴你可以使用哪些值，它們的使用場景，還有一些例子。感興趣的朋友一起看看吧2017-08-15
