vertical-align属性笔记

定义

MDN的定义是：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

如果元素没有基线baseline，则以它的外边距的下边缘为基线。

可替换元素

定义（MDN）是：外观渲染独立于css的外部对象，展示不由css来控制。

其中一些元素，如：img，video，input，textarea，本身有尺寸和基线（baseline），就需要使用vertical-align来与父元素对齐。

实例：

html代码：

<div>
Writer
<img src="img/pic02.jpg" class="img1" />
<span class="span">span元素</span>
<img src="img/pic03.jpg" class="img2" />
</div>

取值为默认值：baseline

css代码：

div {
border: 1px solid black;
width: 1000px;
height: 200px;
font-size: 50px;
margin: 0 auto;

}

.img1 {
width: 150px;
vertical-align: baseline;
}

.img2 {
width: 250px;
height: 150px;
}

.span {
width: 250px;
height: 80px;
background-color: yellow;
display: inline-block;
}

展示效果：



上面的代码就相对于给img元素加上了：vertical-align：baseline

取值为：top

为img元素加上vertical-align:top属性值,显示结果为:



上面的图片从左数,第二张图片是vertical-align：baseline，父元素里面的内容（除第一张图片）还是和第二张图片的底部对齐，然后第一张图片与父元素中最高的元素顶部对齐，即第二张图片。

3 取值：text-top

元素的顶部与父元素字体的顶部对齐

4 取值：middle

展示效果：



参考资料：http://www.cnblogs.com/hykun/p/3937852.html