慕課學習-->前端開發-->HTML/CSS-->CSS深入了解之vertical-align
Vertical-align
一、vertical-align基本認識
vertical-align支援的屬性值及組成：除了inherit（繼承）外，還包括4類：
1、線類：baseline（預設值，基線對齊），top，middle，bottom
2、文本類：text-top，text-bottom
3、上标下标類：sub，super
4、數值百分比類：20px，2em，20%，......（支援負值）
值為數值的行為表現機制：在baseline對齊的基礎上上下偏移對應數值大小。
值為百分比時，是相對于line-height計算的！（IE6/IE7下vertical-align百分比值不支援小數line-height）
支援負值的屬性：margin，letter-spacing，word-spacing，vertical-align
二、vertical-align起作用的前提
各種display值對vertical-align的影響
1、Vertical-align起作用是有前提條件的，vertical-align應用于inline水準以及‘table-cell’元素。
Inline水準：
Inline：<img>，<span>，<strong>，<em>，未知元素，......
Inline-block：<input>（IE8+），<button>（IE8+），......
Table-cell元素：<td>
預設狀态下：圖檔、按鈕、文字和單元格
2、但是，元素的顯示水準是可以更改的
（1）display更改元素的顯示水準
（2）CSS聲明更改元素的顯示水準：浮動使元素變成block水準，絕對定位使元素變成block水準。
3、table-cell居中，vertical-align隻能作用于自身（設定table-cell的元素），為他的子元素設定vertical-align不起作用。
4、文字長度不同和圖檔的垂直居中效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.test-list {
width: 300px;
margin: -1px auto 0;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
display:block
}
.test-list>span{display:inline-block;width:210px;vertical-align:middle;}
.test-list>img{vertical-align:middle;}
</style>
</head>
<body>
<div class="test-list">
<span>文字</span>
<img src="1.png" width="78">
</div>
<div class="test-list">
<span>文字<br/>文字</span>
<img src="1.png" width="78">
</div>
<div class="test-list">
<span>文字<br/>文字<br/>文字</span>
<img src="1.png" width="78">
</div>
<div class="test-list">
<span>文字<br/>文字<br/>文字<br/>文字</span>
<img src="1.png" width="78">
</div>
</body>
</html>
三、vertical-align與line-height之間的關系
1、Vertical-align與line-height（垂直對齊與行高）
Vertical-align百分比是相對于line-height值計算的
（1）例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
text-align:center;
background-color: #e0e0e0;
width:600px;
font-size: 24px;
line-height: 1.5;
}
img{width:300px;vertical-align: baseline;}
.showline {
display: inline-block;
width: 0;
outline: 1px dashed red;
}
</style>
</head>
<body>
<p id="box" class="box">
<img src="1.png"><span class="showline fade in" data-display="inline-block"> </span>
</p>
</body>
</html>
對于内聯元素，vertical-align與line-height雖然看不見，但實際上 到處都是 。也就是說，隻要元素是内聯元素，就一定會受vertical-align和line-height影響。
圖檔使用和繼承的CSS聲明為：vertical-align: baseline;font-size: 24px;line-height: 1.5;此時的實際行高是36px，也就是紅色虛線的高度是36px。内聯元素預設基線對齊，圖檔後面的虛線屬于字元，即圖檔與文字下邊緣對齊，是以圖檔下面就出現了空白。
圖檔下面的空白是vertical-align與line-height共同造成的。
對症下藥：A、消滅vertical-align：display:block;margin:auto;行高起作用的前提是内聯元素
<style>
.box {
text-align:center;
background-color: #e0e0e0;
width:600px;
font-size: 24px;
line-height: 1.5;
}
img{width:300px;vertical-align: baseline;display: block; margin: auto;}
</style>
<p id="box" class="box">
<img src="1.png">
</p>
B、改變圖檔的vertical-align：bottom/middle/top不用基線對齊，使用線性對齊。
C、改變line-height：line-height: 0;或者font-size:0;
（2）基本現象衍生：（近似）垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
text-align:center;
background-color: #e0e0e0;
width:600px;
font-size: 24px;
line-height: 210px;
}
img{width:300px;vertical-align: middle;}
.showline {
display: inline-block;
width: 0;
outline: 1px dashed red;
}
</style>
</head>
<body>
<p id="box" class="box">
<img src="1.png"><span class="showline fade in" data-display="inline-block"> </span>
</p>
</body>
</html>
圖檔設定垂直居中vertical-align:middle，父元素設定行高line-height大于圖檔高度。相容性好：谷歌、火狐、IE7+等。IE7使用的時候，<p><img src="1.png"></p>是不行的，應寫為：<p><img src="1.png"><!--這裡要折行或空格--></p>
2、CSS2的可視化格式模型文檔
‘inline-block’的基線是正常流中最後一個line box的基線，除非，這個line box裡面既沒有line boxes或者本身‘overflow’屬性的計算值不是‘visible’，這種情況下基線是margin底邊緣。
四、vertical-align線類屬性值深入了解
深入了解vertical-align底線bottom、頂線top、中線middle的行為表現
1、vertical-align:bottom
定義：（1）inline/inline-block元素：元素底部和整行的底部對齊。
（2）table-cell元素：單元格底部padding邊緣和表格行的底部對齊。
2、vertical-align:top
定義：（1）inline/inline-block元素：元素頂部和整行的頂部對齊。
（2）table-cell元素：單元格頂部padding邊緣和表格行的頂部對齊。
3、vertical-align:middle
定義：（1）inline/inline-block元素：元素的垂直中心點和父元素基線上1/2x-height處對齊。
（2）table-cell元素：單元格填充盒子相對于外面的表格行居中對齊。（td單元格不足高度會用padding填充）
五、vertical-align文本類屬性值
Vertical-align:text-top/text-bottom
定義：
1、vertical-align:text-top
盒子的頂部和父級content area的頂部對齊。
2、vertical-align:text-bottom
盒子的底部和父級content area的底部對齊。
Vertical-align對齊與父級相關，是以：
元素vertical-align垂直對齊的位置與前後的元素都沒有關系；
元素vertical-align垂直對齊的位置與行高line-height沒有關系，隻與字型大小font-size有關；
實際作用：相容性好（IE6/IE7）。一般用在表情圖檔（或原始尺寸背景圖示）與文字的對齊效果。
3、舉例：
（1）使用基線的問題在于圖示偏上；
（2）使用頂線/底線的問題在于受其他内聯元素影響，造成巨大定位偏差；
（3）使用中線也是不錯的選擇，但需要恰好的字型大小以及相容性要求不高；如圖圖示24px，文字大小16px，圖示偏下。IE6/IE7下與其他浏覽器下有差異。
（4）使用文本底部較合适，不受行高以及其他内聯元素影響；
六、Vertical-align上标下标類sub/super
1、HTML中的上标和下标
（1）HTML中的上标：<sup>
（2）HTML中的下标：<sub>
上下标文字大小是正常文字的75%。
<sup> -> vertical-align:super
<sub> -> vertical-align:sub
2、定義：
Vertical-align:super提高盒子的基線到父級合适的上标基線位置。
Vertical-align:sub降低盒子的基線到父級合适的下标基線位置。
七、相鄰前後元素的vertical-align值不同，該如何表現
對立屬性
1、相鄰元素top/bottom，top/bottom是相對于父級而言的，互相之間無幹擾。
2、相鄰元素text-top/text-bottom，盒子的頂部（底部）和父級content area的頂部（底部）對齊，與字型行高有關。
元素的表現不會被前後元素的vertical-align影響，隻需關注目前元素與父級的關系。
八、vertical-align的實際應用
1、小圖示和文字的對齊：使用vertical-align負值
20*20px的圖示，後面跟14px的文字，圖示vertical-align:-5px，對其效果較好。
2、實作不定尺寸圖檔或多行文字的垂直居中
實作分三步：
（1）主題元素inline-block化；
（2）0寬度100%高度輔助元素；
（3）Vertical-align:middle
舉例：不定尺寸圖檔的垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{height:200px;text-align:center;background:#eee;}
i{display:inline-block;height:100%;vertical-align:middle;}
img{vertical-align:middle;}
</style>
</head>
<body>
<p><img src="1.png"><i></i></p>
</body>
</html>
舉例：多行文字的垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{height:200px;text-align:center;background:#eee;}
i{display:inline-block;height:100%;vertical-align:middle;}
span{display:inline-block;vertical-align:middle;}
</style>
</head>
<body>
<p><span>共一行<br/>共兩行<br/>共三行</span><i></i></p>
</body>
</html>