做页面时会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一行就会垂直居中对齐了。
在 HTML 代码中，有时会需要在文字旁边加上一个图标。默认情况，是图片置顶对齐，文字置底对齐，这样一来，文字和图片排列在一起就很难看，查一下CSS2手册，找到vertical-align的属性，可接受的参数值如下：
baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 将支持valign特性的对象的内容与对象顶端对齐
text-top : 将支持valign特性的对象的文本与对象顶端对齐
middle : 将支持valign特性的对象的内容与对象中部对齐
bottom : 将支持valign特性的对象的文本与对象底端对齐
text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位
为了布局更好看，我选择了text-bottom，让文字与图片在同一水平线上，效果好多了：只是在img标签中加入了vertical-align的css定义.
