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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。