CSS vertical-align屬性詳解，cssvertical-align

CSS vertical-align屬性詳解，cssvertical-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如

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

css 中vertical-align屬性的困惑

一般情況vertical-align用的地方不多是因為其相容性不好。
在及其特殊的情況下才會用到它，在需要漢字和圖片對齊的地方我從來不用它。
在父元素高度一定的情況下用height和line-height可以實現垂直對齊。
垂直置中還和字型有一定的影響，字型不一樣可能看著就不太絕對置中。
vertica-align不是所有標籤內都有效。在td內用向你說的有中英文差異的話不如在外邊再加個div使div置中裡面的自然也就置中了。
需要圖文都置中的地方建議使用height和line-height同值的方法。
 
CSS中怎實現vertical-align屬性的效果？

把ver 中的span元素的display屬性改為blcak為塊狀元素
#ver a span{
display：black
}