图文混合排列

文字相对于图片垂直居中

vertical-align: middle;

1、baseline 基线对齐

baseline 让元素的基线 与父元素文本的基线对齐。
如果目标元素没有基线，例如 图片、表单输入框或其它置换元素，那么目标元素的底端与父元素的基线对齐。

2.1 sub

sub把元素放在下标处，即元素的基线（对置换元素来说是底边线）低于父元素的基线。

2.2 super

和sub相反，让元素的基线高于父元素的基线，具体高多少由用户代理来决定

3.1 top

使元素及其后代元素的顶部与整行的顶部对齐。

3.2 bottom

bottom 与 top 相反。使元素及其后代元素的底部与整行的底部对齐。

4.1 text-top

使元素的顶部与父元素的字体顶部对齐。

4.2 text-bottom

使元素的底部与父元素的字体底部对齐。

5、middle 中线对齐

使元素的中部与父元素的基线向上偏移0.5ex处的线对齐（1ex等于父元素的font-size）

6、% 百分比

百分数不能像align="middle”那样对齐图像。把vertical-align的值设为百分数，效果是把元素的基线（或置换元素的底边）相对父元素的基线抬升或下沉指定的量（指定的百分数相对元素自身而非父元素的line-height 计算）。正百分数抬升元素，负百分数下沉元素。

7、具体的值

vertical-align的效果很简单：把元素抬升或下沉声明的距离。因此，vertical-align：5px；把元素从原位置向上抬升5像素。长度值为负时，下沉元素。