垂直对齐：vertical-align属性（3）

7. 上标和下标

上标（vertical-align:super）使元素的基线（替换元素的底端）相对于父元素的基线升高，下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。例如有如下代码，其显示如图7-43所示。

<p>上标文字<span style="vertical-align:super;">vertical-align:super;</span>下标文字<span style="vertical-align:sub;">vertical-align:sub;</span></p>

图7-43 上标和下标

上下标不会改变元素文字的尺寸大小。

8. 长度值和百分比

和上下标类似，长度值和百分比值可使元素的基线（替换元素的底端）相对于父元素的基线升高（正值）或者降低（负值）。

上下标的移动尺寸是由浏览器确定的，而设定长度值或者百分比，可以精确控制文字上下移动的幅度。

百分比与行高有关，例如有如下代码，其显示如图7-44所示。

p { line-height : 2em; } 
<p>行高2em，纵向百分比对齐：<span style="vertical-align:100％;">100％正数向上</span>，而<span style="vertical-align:-100％;">-100％负数向下</span>。</p>

图7-44 百分比对齐

设置垂直对齐会影响到行框高，例如有如下代码，其显示如图7-45所示。

p { line-height : 2em; } 
<p>垂直对齐<span style="vertical-align:2em;">正数向上</span>，而<span style="vertical-align:-2em;">负数向下</span>。&lt;p&gt;行高2em，而设置垂直对齐的文字撑开了行框。</p>

图7-45 垂直对齐对行框的影响

注意：在IE中设定百分比或者数值对齐会造成内容的叠加混乱，如图7-46所示。

图7-46 IE中的叠加混乱