如果在一行中即有小图片，又有文字，这时候图片和文字的对齐一般就需要仔细设置。其中用到的最重要的 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
