vertical-align
vertical-align在css中非常难以理解，首先说其常用的值，有：
- baseline：基线对齐
- top：把行内级元素的顶部跟行盒顶部对齐
- middle：行内级盒子的中心点与父盒基线加上字母x的一半高度对齐
- bottom：把行内级盒子的底部跟行盒底部对齐
行盒
想要理解好vertical-align，需要先理解好行盒的概念，如下图，红框所示为一个行盒，一个行盒会包裹住一行的所有内容，多个行盒共同构成一个块级元素。
而vertical-align正是用于控制行盒中各个元素的摆放排布的。
注意，文本是具有行高的，行高会撑起一个行盒的高度，没有文本的行内级元素（如img、inline-block）的基线是在元素底部。而行盒中元素默认对齐方式又是baseline。因此可以观察到上图中行盒1的蓝色盒子的底部与文字基线对齐，且行盒1底部以及行盒2的底部看起来有一些空余。
行盒内多个元素在不同情况下的对齐情况
仅有行内级盒子的情况
如上图，蓝色盒子是一个inline-box盒子，没有文本，但由于行盒默认对齐方式是baseline，一次你是行盒会撑起来一点以保证后续在添加文本时能保证基线对齐。
针对这种情况，如果我们不想要下方的空白位置，将蓝色盒子的vertical-align更改为top|middle|bottom，或是将其改为块级元素即可。
图片+文本的情况
图片img也属于行内级元素，其基线在图片底部，遇到文本时，其默认对齐方式如下。
不想要下面的空白位置，将img的vertical-align更改为top|middle|bottom（注意文本的位置也会相应改变，分别如下图），或是将其改为块级元素即可。
图片+文本+行内级盒子的情况
如上图，如果需要蓝色盒子和图片都顶着行盒最上方排布，需要为图片和蓝色盒子设置vertical-align为top，效果如下图。
注意，此时如果仅给img设置vertical-align为top而不给右边的蓝色盒子设置，会出现如下图的情况。
这是因为行盒在包裹着所有行盒内部元素除外，此时还保证蓝色盒子（基线在盒子底部）要与最左边的文本基线对齐。
图片+文本+带文本的行内级盒子的情况
这个排布看起来很怪，如下图，但是实际上结合baseline基线对齐来进行理解即可。
首先看最右边的蓝色盒子，原本根据标准流他是需要顶着父级容器的最上方进行排布的，但是没有。原因在于蓝色盒子的文本所在的行盒顶着蓝色盒子的最上方开始排布，此时蓝色盒子的基线不再是底部，而是这行文本的基线位置，为了保证父级容器中的这一个行盒内所有行内级元素（包括最左侧的文本+图片+最右侧的行内块元素）基线对齐，因此蓝色盒子被强行往下位移。因此蓝色盒子上方的空白就可以理解了。
如果想要三个元素都顶着随上方排布，则为img的vertical-align设置为top即可，效果如下图。
对于vertical-align能否进行居中布局的疑问
先说结论：不行。
对于如下代码，是使用vertical-align进行图片的垂直居中。
css
.container{
height: 200px;
line-height: 200px;
font-size: 30px;
background-color: #1aa;
}
img{
vertical-align: middle;
}效果如下。
vertical-align设置为center时的效果在开头就以给出，这里只能做到与字母x的中部对齐，而x在文本中总是会下沉一些的。
vertical-align作用于行内块元素时
思考如下场景，为何行内块元素（下面简称ib）的文本内容溢出至父级容器下部且父元素的文本下移？
html
//css
<style>
.outside{
height: 300px;
line-height: 300px;
background-color: #faa;
}
.inside{
display: inline-block;
width: 200px;
height: 100px;
line-height: 500px;
background-color: #afa;
}
</style>
//html
<div class="outside">
outside-content
<span class="inside">inline-block-content</span>
</div>注意这里有两个点，一个是溢出，这是因为为ib的行高撑起来行盒的高度，ib盒子不得不上移，如下图。
另一个是文本内容溢出至父级容器下部且父元素文本内容下移，这是因为元素默认veritical-align为baseline，父元素文本的基线需要与ib元素文本的基线对齐，因此父元素的文本被强制下移。