CSS vertical-align屬性詳解

時間 2019-11-09

標籤 css vertical align 屬性詳解欄目 CSS 简体版

原文原文鏈接

前言：關於vertical-align屬性

vertical-align屬性多是CSS屬性中比較很差理解的一個。css

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

本文將經過一系列實例實驗說明它的做用。git

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

實踐出真知

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

它包含一個div做爲父元素，兩張圖片，和一個span元素，以下：字體

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

爲了更易於比較，須要加一些簡單的樣式，以下所示：this

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;屬性。url

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

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

第二個屬性值是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;
}