CSS vertical-align屬性詳解

.

• 首頁
• 博客園
• 聯系我

• 前言：關於vertical-align屬性.
• 實踐出真知.
• 垂直居中.
• 第二種用法.

• 留言評論
• 返回頂部

前言：關於vertical-align屬性

vertical-align屬性可能是CSS屬性中比較不好理解的一個。

W3C對它的解釋是：該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。

本文將通過一系列實例實驗說明它的作用。

[注：將鼠標放置到本文的圖片上可看到輔助線]

實踐出真知

首先，在HTML body中定義一個用於實驗的HTML結構

它包含一個div作為父元素，兩張圖片，和一個span元素，如下：

<div>
   Writing
   <img id="img1" src="img1.jpg" />
   <span id="span">span元素</span>
   <img id="img2" src="img2.jpg" />
</div>

為了更易於比較，需要加一些簡單的樣式，如下所示：

div{
  border:1px solid black;/*給父元素添加一個邊框，便於辨認*/
  width:1000px;
  height:200px;
  font-size: 50px;/*設置大號字體，便於比較*/
}

img#img1{
  width:150px;
}

#span{
  display: inline-block;/*注意這里的inline-block*/
  width:250px;
  height:80px;
  background-color: yellow;/*給span元素設置一背景色，便於辨認*/
}

img#img2{
  width:250px;
} 

因為vertical-align的默認值為baseline，所以以上代碼相當於為#img1元素設置了vertical-align:baseline;屬性。

W3C對baseline值的解釋是：默認，元素放置在父元素的基線上。

目前的效果大概是這樣（黑色邊框即為父元素div范圍）：

第二個屬性值是vertical-align:top;，W3C對top值的解釋是：把元素的頂端與行中最高元素的頂端對齊。

本例中，最高元素即為圖片2（#img2），如下所示：

第三個屬性值是vertical-align:text-top;，W3C對text-top值的解釋是：把元素的頂端與父元素字體的頂端對齊。如下所示：

第四個屬性值是vertical-align:middle;，W3C對middle值的解釋是：把此元素放置在父元素的中部。

其實從下圖可以看出，對齊的是父元素文本的中部：

第五個屬性值是vertical-align:bottom;，W3C對bottom值的解釋是：把元素的頂端與行中最低的元素的頂端對齊。

本例中，行中最低元素即為span元素，如下所示：

第六個屬性值是vertical-align:text-bottom;，W3C對text-bottom值的解釋是：把元素的底端與父元素字體的底端對齊。如下所示：

可以使用定長表示元素底部與父元素基線（baseline）的距離，如vertical-align:20px;

正值表示往上，負值表示往下，如下所示：

亦可使用百分數表示元素底部相對於父元素基線（baseline）移動相對於父元素高（height）的百分比，如vertical-align:40%;

同樣的，正值表示往上，負值表示往下，如下所示：

不僅可以將vertical-align屬性應用在圖片上，也可以應用 在其它行內（內聯）元素上

如此例，把vertical-align:top;運用在span元素上，如下所示：

垂直居中

從上文的示例分析可以看出，vertical-align屬性雖有很多個可能的值

我們可以利用它的middle值，構造出令不定高的行內（內聯）元素在父元素中垂直居中的效果

只需要在需要居中的元素外增加一個空的span元素

將span元素display:inline-block;width:1px;height:100%;並添加vertical-align:middle;

將需要垂直居中的元素（本例中為#img1元素）添加vertical-align:middle;

為了將元素水平居中，可以在它的父元素（本例中為div元素）設置text-align:center;

目前的HTML結構看起來可能像這樣：

<div>
   <span id="span"></span>
   <img id="img1" src="testImg1.jpg" />
</div>

目前的CSS應該像這樣：

div{
  width:1000px;
  height:200px;
  text-align: center;
}

img#img1{
  vertical-align: middle;
}

#span{
  display: inline-block; 
  width:1px;
  height:100%;
  vertical-align: middle;
}

效果會像這樣：

第二種用法

其實，vertical-align屬性還有第二種用法

vertical-align可以用在display:table-cell;元素的下面（典型的就是td），這時的有四個可取值baseline|top|middle|bottom如下圖

這種用法相對比較簡單，在此不再展開贅述。