CSS 基礎(chǔ)教程

CSS 盒子模型

CSS3基礎(chǔ)教程

CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS vertical-align(垂直對(duì)齊)

CSS vertical-align垂直對(duì)齊方式屬性用于定義嵌入式或表格單元格框的垂直對(duì)齊方式。vertical-align是CSS的重要的特性之一。對(duì)于初學(xué)者來說，開始可能不容易掌握,文章底部給出了示例,方便您快速理解掌握該屬性。

它能做什么

它應(yīng)用于內(nèi)聯(lián)或內(nèi)聯(lián)塊元素。
它影響元素的對(duì)齊方式，而不影響其內(nèi)容。（表格單元格除外）
當(dāng)將其應(yīng)用于表格單元格時(shí)，它將影響單元格的內(nèi)容，而不是單元格本身。

CSS vertical-align垂直對(duì)齊值

值	描述
baseline	它將元素的基線與父元素的基線對(duì)齊。這是默認(rèn)值。
length	它用于按指定的長度增加或減少元素的長度。也可以使用負(fù)值。
%	它用于按“行高”屬性的百分比增加或減少元素。允許為負(fù)值。
sub	對(duì)齊元素，就好像它是下標(biāo)一樣。
super	它對(duì)齊元素，就好像它是上標(biāo)一樣。
top	它將元素的頂部與線上的最高元素的頂部對(duì)齊。
bottom	它將元素的底部與該行的最低元素對(duì)齊。
text-top	元素的頂部與父元素的字體的頂部對(duì)齊。
middle	元素放置在父元素的中間。
text-bottom	元素的底部與父元素的字體的底部對(duì)齊。
initial	它將此屬性設(shè)置為其默認(rèn)值。
inherit	從其父元素繼承此屬性。

CSS垂直對(duì)齊在線示例

示例

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.top {  
    vertical-align: text-top;  
}  
img.bottom {  
    vertical-align: text-bottom;  
}  
</style>  
</head>  
<body>  
<p><img src="/run/images/heart.jpg" alt="心型圖案"/> 這是具有默認(rèn)對(duì)齊方式的圖像。</p>   
<p><img src="/run/images/heart.jpg" style="vertical-align: text-top;" alt="心型圖案"/> 這是文本頂部對(duì)齊的圖像。</p>   
<p><img src="/run/images/heart.jpg" style="vertical-align: text-bottom;" alt="心型圖案"/> 這是具有文本底部對(duì)齊方式的圖像。</p>  
</body>  
</html>

測(cè)試看看?/?

輸出：

心型圖案這是具有默認(rèn)對(duì)齊方式的圖像。

心型圖案這是文本頂部對(duì)齊的圖像。

心型圖案這是具有文本底部對(duì)齊方式的圖像。

CSS white-space(空白)CSS line-height(行高)