vertical-align的理解：
設置元素的垂直對齊方式，是以父元素作爲參照的。
多用於圖片和文字的並排對齊。
適用於內聯元素，內聯塊元素和表單元素。
- display:inline;
- display:inline-block;
- display:table;
- display:table-cell;
瀏覽器支持所有瀏覽器都支持 vertical-align 屬性。
允許指定負長度值和百分比值。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
默認值：baseline
繼承性：無
JS語法：
object.style.verticalAlign="bottom"
基線
下面紅線就是基線。
取值
baseline
默認。元素基線與父元素的基線對齊。
一些 可替換元素，比如 `` ， HTML標準沒有說明它的基線，這意味着使用這個關鍵字，各瀏覽器表現可能不一樣。
sub
元素基線與父元素字體的下標基線對齊。
super
元素基線與父元素字體的上標基線對齊。
text-top
元素頂端與父元素字體的頂端對齊。
text-bottom
元素底端與父元素字體的底端對齊。
middle
元素中線與父元素的小寫x中線對齊。把此元素放置在父元素的中部。
<length>
元素基線超過父元素的基線指定高度。可以取負值。
<percentage>
同 <length> , 百分比相對於 line-height 。可以爲負值。基線對於百分數來說就是0%。
用百分比指定由基線算起的偏移量。
下面兩個屬性不像上面的屬性相對於父元素，而是相對於整行：
top
元素及其後代的頂端與整行的頂端對齊。
bottom
元素及其後代的底端與整行的底端對齊。
如果元素沒有基線baseline，則以它的外邊距的下邊緣爲基線。
取值 (table-cell元素)
baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
與同行單元格的基線對齊。
top
單元格的內邊距的上邊緣與行的頂端對齊。
middle
單元格垂直居中。
bottom
單元格的內邊距的下邊緣與行的底端對齊。
可以取負值。
例子
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>vertical-align</title>
<style>
.test p {
border: 1px solid red;
font-size: 26px;
line-height: 1;
}
.test a {
margin-left: 5px;
font-size: 18px;
text-decoration:none;
}
.baseline a {
vertical-align: baseline;
}
.sub a {
vertical-align: sub;
}
.super a {
vertical-align: super;
}
.top a {
vertical-align: top;
}
.text-top a {
vertical-align: text-top;
}
.middle a {
vertical-align: middle;
}
.bottom a {
vertical-align: bottom;
}
.text-bottom a {
vertical-align: text-bottom;
}
.length a {
vertical-align: 10px;
}
</style>
</head>
<body>
<ul class="test">
<li class="baseline">
<strong>與基線對齊</strong>
<p>參考內容X<a href="?">baseline基線對齊</a></p>
</li>
<li class="sub">
<strong>與參考內容X的下標對齊</strong>
<p>參考內容X<a href="?">sub下標對齊</a></p>
</li>
<li class="super">
<strong>與參考內容X的上標對齊</strong>
<p>參考內容X<a href="?">super上標對齊</a></p>
</li>
<li class="top">
<strong>對象的內容與對象頂端對齊</strong>
<p>參考內容X<a href="?">top要對齊的內容</a></p>
</li>
<li class="middle">
<strong>對象的內容與對象中部對齊</strong>
<p>參考內容X<a href="?">middle要對齊的內容</a></p>
</li>
<li class="bottom">
<strong>對象的內容與對象底端對齊</strong>
<p>參考內容X<a href="?">bottom要對齊的內容</a></p>
</li>
<li class="text-top">
<strong>對象的文本與對象頂端對齊</strong>
<p>參考內容X<a href="?">text-top要對齊的內容</a></p>
</li>
<li class="text-bottom">
<strong>對象的文本與對象底端對齊</strong>
<p>參考內容X<a href="?">text-bottom要對齊的內容</a></p>
</li>
<li class="length">
<strong>與基線算起的偏移量</strong>
<p>參考內容X<a href="?">length偏移量對齊</a></p>
</li>
</ul>
</body>
</html>