上一节我们讲解了行高与单行纯文字的垂直居中（line-height），而如果行内含有图片和文字，在浏览器渲染出来后，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。

语法：

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit

说明：

设置元素内容的垂直对齐方式。

参数：

baseline： 基线对齐；

sub： 下标显示；

super： 上标显示；

top： 顶端对齐；

text-top： 文本的顶端对齐；

middle： 中部对齐；  //没有研究透的属性

bottom： 底端对齐；

text-bottom：   文本的底端对齐；

百分比和长度： CSS2，可为负数。

初始值：baseline

继承性：不继承

 此处需要特别注意的是：垂直对齐属性只对文本有效（是指包含了#Text节点的元素节点才能正确地处理vertical-align属性）。同时，该属性不能继承。

在上面一节中，介绍了文本的基线、顶线、中线和底线，还有内容区、行内框和行框，而本节的垂直对齐和这几个概念密切相关。

<style type="text/css">
p {vertical-align:baseline; font-size:20px; line-height:60px; background-color:yellow;}
span {background-color: red;}
u {background-color: blue;}
del {background-color: pink;}
</style>

//HTML代码
<p><span>Ajax测试</span><u>Ajax测试</u><del>Ajax测试</del>Ajax测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

默认情况：  

 
其他说明：
1、SPAN、U、DEL标签的 offsetWidth = SUM（ 字符 * font-size * 修正系数）（这里，中文的修正系数为1，数字的修正系数0.6，英文字符修正系数差异很大，比如ijl很小，wmk等比较大，大写英文同样修正系数不统一）。