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             

转载于:https://www.cnblogs.com/l0m0l/p/3382884.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值