网络编程
位置:首页>> 网络编程>> 网页设计>> 垂直对齐:vertical-align属性(3)

垂直对齐:vertical-align属性(3)

作者:ddcatlee 来源:豆豆猫的窝 发布时间:2008-07-11 20:55:00 

标签:垂直,对齐,属性,css

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中的叠加混乱

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com