CSS 的 vertical-align 属性

如果在一行中即有小图片，又有文字，这时候图片和文字的对齐一般就需要仔细设置。其中用到的最重要的 CSS 属性是 vertical-align。

假设我们的 HTML 代码如下：

<div id="test">
Hello <img src="http://static.cnblogs.com/favicon.ico" width="16" height="16" class="favimage"> Image!
</div>

vertical-align 的取值主要有 top，text-top，middle，baseline，text-bottom，bottom 等。

取值	描述	效果
top	图片顶部和该行的顶部对齐	Hello  Image!
text-top	图片顶部和该行文字的顶部对齐	Hello  Image!
middle	图片中间和 x 字母的中间对齐	Hellx  Image!
baseline	图片底部和该行文字的基线对齐，默认值	Hello  Image!
text-bottom	图片底部和该行文字的底部对齐	Hello  Image!
bottom	图片底部和该行的底部对齐	Hello  Image!

上面的例子中，图片的高度为 16px，而我们设置文本的 line-height 为 24px。选择文本可以看到文本占用的高度。

参考资料：
[1] W3C CSS 2.1 - Visual formatting model details #vertical-align
[2] 我对CSS vertical-align的一些理解与认识（一）
[3] CSS vertical-align的深入理解(二)之text-top篇
[4] Aligning inline images with the vertical-align property | Max Design
[5] How to Vertically Align Images with Text - CSS Tips
[6] 7.4 垂直对齐：vertical-align属性 - 豆豆猫的窝[V6.0]
[7] Font metrics and vertical space in CSS | The Typekit Blog