vertical-align：內聯元素在行框內的垂直對其方式

時間 2019-11-29

標籤 vertical align 內聯元素在行框內垂直方式简体版

原文原文鏈接

語法：

默認值：baseline前端

適用於：內聯及 table-cell 元素web

繼承性：有spa

取值：

baseline：將支持valign特性的對象的內容與基線對齊code

sub：垂直對齊文本的下標htm

super：垂直對齊文本的上標對象

top：將支持valign特性的對象的內容與對象頂端對齊blog

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。