# CSS属性vertical-align详解
# 作用对象
vertical-align的意思是在垂直方向进行对齐。它主要对以下属性的元素有效 inline元素、inline-block元素和普通的文本。
# 行盒：line-box
定义： （盒的排布方式，不是行盒）在一个内联格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。 （盒的对齐方式，不是行盒）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。 （什么是行盒）包含来自同一行的盒的矩形区域叫做行盒。
# vertical-aligh默认值baseline
baseline：把盒的基线与父级盒的基线对齐。如果该盒没有基线，就把bottom margin边和父级的基线对齐。（为默认值）这里我们需要知道什么是baseline，baseline在不同的盒子里有什么样的表现。
简单来说，baseline是小写字母x下面的一条线。 
# 具体来说
- 在文本之类内联元素中，基线是字符x的下边缘位置（中文的底部并不是基线）。
- 在inline-block元素中，也分两种情况
- 如果该元素中有内联元素，基线就是最后一行内联元素的基线
- 如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘
- img标签的display设置为inline还是inline-block，其基线都为margin-box的下边缘。
# 参数
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| middle | 把此元素放置在父元素的中部。 |
| top | 把元素的顶端与行中最高元素的顶端对齐。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-top | 把元素的顶端与父元素字体的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标。 |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
- baseline 就是当前元素基线与父元素的基线对齐 父元素的基线就是指行盒的基线。其基线是相对固定不变的，可以在行盒里写一个字母X，行盒的基线就是字母X的底部。它的基线是永远相对于这个x不变的。
<div class="block">
<span>x子元素A</span>xHgf
</div>
<style>
.block {
height: 200px;
width: 500px;
border: 1px solid #ddd;
font-size: 50px;
}
span {
background-color: #ddd;
}
</style>
分析：
父元素.block的base-line是xHgf的baseline。
- middle
当前元素的垂直中心点与行盒基线往上 1/2
x-height处对齐（简单说就是X字母的中心位置对齐）。
<div class="block">
<span>x子元素A</span>xHgf
</div>
<style>
.block {
height: 200px;
width: 500px;
border: 1px solid #ddd;
font-size: 50px;
}
span {
background-color: #ddd;
vertical-algin: middle;
}
</style>
top: 当前元素的顶边和行内最高元素的顶边对齐。
<div class="block">
<span class="child"></span>
<span class="top">x子元素A</span>xHgf
</div>
<style>
.child {
display: inline-block;
width: 40px;
height: 80px;
margin-top: 20px;
background-color: #ff0000;
}
.block {
height: 200px;
width: 500px;
border: 1px solid #ddd;
font-size: 50px;
}
.top {
vertical-align: top;
background-color: #ddd;
}
</style>
图中 子元素A设置成top,它的与当前行盒里最高元素的顶端相对齐，顶端是包括margin值的。
bottom: 当元素的底端与行中最低的元素的底端对齐。（网上写顶端，意思有待研究）
text-top把元素的顶端与父元素字体的顶端对齐。（字体很重要，它对齐的是与父元素字体一样的顶端）
<div class="block">
<span class="child"></span>
<span class="c2">x子元素A</span>
<span class="c3">x子元素3</span>
<span class="c4">x子素4</span>
</div>
<style>
.block {
border: 1px solid #ddd;
font-size: 50px;
}
.child {
display: inline-block;
width: 40px;
height: 80px;
margin-top: 20px;
background-color: #ff0000;
}
.c2 {
background-color: #ddd;
vertical-align: text-top;
font-size:30px;
}
.c3 {
font-size:50px;
}
.c4 {
font-size:80px;
background-color: #ff0000;
}
</style>
图中 父元素字体是 50px；而与之相同的子元素3的字体50px, 所以可以看成是与子元素3的顶部对齐。
vertical-align:text-bottom 同理，与底部对齐。
其他属性比较不重要就不再阐述了。