.
返回頂部
vertical-align屬性可能是css屬性中比較不好理解的乙個。
w3c對它的解釋是：該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
本文將通過一系列例項實驗說明它的作用。
首先，在html body中定義乙個用於實驗的html結構
它包含乙個div作為父元素，兩張，和乙個span元素，如下：
id="span">span元素span>
div>為了更易於比較，需要加一些簡單的樣式，如下所示：
divimg#img1
#span
img#img2因為vertical-align的預設值為baseline，所以以上**相當於為#img1元素設定了vertical-align:baseline;屬性。
w3c對baseline值的解釋是：預設，元素放置在父元素的基線上。
目前的效果大概是這樣（黑色邊框即為父元素div範圍）：
第二個屬性值是vertical-align:top;，w3c對top值的解釋是：把元素的頂端與行中最高元素的頂端對齊。
第三個屬性值是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:20
px;正值表示往上，負值表示往下，如下所示：
亦可使用百分數表示元素底部相對于父元素基線（baseline）移動相對于父元素高（height）的百分比，如vertical-align:40
%;同樣的，正值表示往上，負值表示往下，如下所示：
不僅可以將vertical-align屬性應用在上，也可以應用 在其它行內（內聯）元素上
如此例，把vertical-align:top;運用在span元素上，如下所示：
從上文的示例分析可以看出，vertical-align屬性雖有很多個可能的值
我們可以利用它的middle值，構造出令不定高的行內（內聯）元素在父元素中垂直居中的效果
只需要在需要居中的元素外增加乙個空的span元素
將span元素display:inline-block;width:1
px;height:100
%;並新增vertical-align:middle;
將需要垂直居中的元素（本例中為#img1元素）新增vertical-align:middle;
為了將元素水平居中，可以在它的父元素（本例中為div元素）設定text-align:center;
目前的html結構看起來可能像這樣：
div>目前的css應該像這樣：
divimg#img1
#span效果會像這樣：
其實，vertical-align屬性還有第二種用法
vertical-align可以用在display:table-cell;元素的下面（典型的就是td），這時的有四個可取值baseline|top|middle|bottom如下圖
這種用法相對比較簡單，在此不再展開贅述。
CSS vertical align屬性的用法
vertical align的定義 w3c上對vertical align的定義 vertical align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元...
Android attr format屬性詳解
boolean boolean表示attr是布林型別的值，取值只能是true或false。string string表示attr是字串型別。integer integer表示attr是整數型別，取值只能是整數，不能是浮點數。float float表示attr是浮點數型別，取值只能是浮點數或整數。fr...
css vertical align簡單的應用
vertical align屬性值 我見過的 1 用來寫在img標籤上，讓兩旁的字與底部 頂部 中間對齊 vertical align text top vertical align text bottom vertical align middle 這一前面的文字 這一前面的文字 src asse...