vertical-align：内联元素在行框内的垂直对其方式

语法：

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默认值：baseline

适用于：内联及 table-cell 元素

继承性：有

取值：

baseline：将支持valign特性的对象的内容与基线对齐

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：将支持valign特性的对象的内容与对象顶端对齐

text-top：将支持valign特性的对象的文本与对象顶端对齐

middle：将支持valign特性的对象的内容与对象中部对齐

bottom：将支持valign特性的对象的文本与对象底端对齐

text-bottom：将支持valign特性的对象的文本与对象顶端对齐

<percentage>：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

示例代码：

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
 7 <style>
 8 .test p{border:1px solid #000;font-size:16px;line-height:2;}
 9 .test a{margin-left:5px;font-size:12px;}
10 .baseline a{vertical-align:baseline;}
11 .sub a{vertical-align:sub;}
12 .super a{vertical-align:super;}
13 .top a{vertical-align:top;}
14 .text-top a{vertical-align:text-top;}
15 .middle a{vertical-align:middle;}
16 .bottom a{vertical-align:bottom;}
17 .text-bottom a{vertical-align:text-bottom;}
18 .length a{vertical-align:10px;}
19 </style>
20 </head>
21 <body>
22 <ul class="test">
23     <li class="baseline">
24         <strong>与基线对齐</strong>
25         <p>参考内容<a href="?">基线对齐</a></p>
26     </li>
27     <li class="sub">
28         <strong>与参考内容的下标对齐</strong>
29         <p>参考内容<a href="?">下标对齐</a></p>
30     </li>
31     <li class="super">
32         <strong>与参考内容的上标对齐</strong>
33         <p>参考内容<a href="?">上标对齐</a></p>
34     </li>
35     <li class="top">
36         <strong>对象的内容与对象顶端对齐</strong>
37         <p>参考内容<a href="?">要对齐的内容</a></p>
38     </li>
39     <li class="text-top">
40         <strong>对象的文本与对象顶端对齐</strong>
41         <p>参考内容<a href="?">要对齐的内容</a></p>
42     </li>
43     <li class="middle">
44         <strong>对象的内容与对象中部对齐</strong>
45         <p>参考内容<a href="?">要对齐的内容</a></p>
46     </li>
47     <li class="bottom">
48         <strong>对象的内容与对象底端对齐</strong>
49         <p>参考内容<a href="?">要对齐的内容</a></p>
50     </li>
51     <li class="text-bottom">
52         <strong>对象的文本与对象顶端对齐</strong>
53         <p>参考内容<a href="?">要对齐的内容</a></p>
54     </li>
55     <li class="length">
56         <strong>与基线算起的偏移量</strong>
57         <p>参考内容<a href="?">偏移量对齐</a></p>
58     </li>
59 </ul>
60 </body>
61 </html>
62

posted @ 2013-10-22 17:50  l0m0l  阅读(640)  评论(0)  编辑  收藏  举报