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;}

效果如下：