CSS vertical-align屬性

CSS vertical-align屬性

以前也常常用到vertical-align進行垂直居中對齊，忽然發現其中的一些屬性值根本就沒使用過，也不清楚效果，將今天的研究成果記錄下。

vertical-align 屬性

下表是w3c上列舉的屬性：

目前全部的瀏覽器都能徹底支持vertical-align，兼容性在線查詢網址：http://caniuse.com/。須要注意的是隻有一個元素屬於inline或是inline-block（table-cell也能夠理解爲inline-block水平）水平，其身上的vertical-align屬性纔會起做用。

最經常使用到的4個屬性baseline、middle、top、bottom之間的位置關係以下圖所示：

vertical-align 實例

HTML代碼：

<div class="content">
  <span class="box">
    <span class="ddd"></span>
    hello world。
  </span>
</div>

默認屬性：baseline

.box{background:black; color:white; padding-left:20px;}
.ddd{display:inline-block; width:4px; height:4px; background:white;}

效果以下：

屬性：bottom

.box{background:black; color:white; padding-left:20px;}
.ddd{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

效果以下：

屬性：middle

    .box{background:black; color:white; padding-left:20px;}
    .ddd{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}

效果以下：