垂直对齐：vertical-align属性

上一小节讲解了行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。

图7-34 文字和图片内容默认垂直对齐方式为基线对齐

这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。

7.4.1 语法

vertical-align属性的具体定义列表如下：
语法：        vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明：        设置元素内容的垂直对齐方式
值：        baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐；text-bottom：文本的底端对齐；
百分比和长度：CSS2，可为负数。
初始值：        baseline
继承性：        不继承
适用于：        行内元素和单元格（table-cell）元素
媒体：        视觉
计算值：        百分比和长度值为绝对长度；其他同指定值

此处需要特别注意的是：垂直对齐属性只对行内元素有效。例如有如下代码：

<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p>

<p>元素默认为块级元素，因此在浏览器内浏览时将不会有任何变化。而如下代码：

<p>垂直对齐<span style="vertical-align:super;">上标</span></p>

<span>元素默认为行内元素，因此显示如图7-35所示。

图7-35垂直对齐属性只对行内元素有效

行内元素还包括图片、表单输入元素等，同时，垂直对齐不能被继承。