vertical-align实现图片和文字水平对齐

文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

方法一：设置各对象的vertical-align属性，这个属性有baseline(基线对齐）、top（顶端对齐）、middle（中线对齐）和bottom（底端对齐）。

其中第一个baseline基线对齐，基线可以理解为小时候写拼音，大多数字母在四线三格中第二个的底线。在中文里，基线通常在文字底部往上1/5位置，这个取值对图片和文字对齐意义不大。

top，是指当前元素与本行中最高的元素的顶端对齐，一排元素都设置顶端对齐，可以实现吊灯效果。

middle，可以设置图片和文字的中线对齐，效果如下图。css样式为：

img{  width: 70px;height: 80px;vertical-align: middle;}
span{ vertical-align: middle; }

bottom，与本行中最低元素底端对齐。可以实现平地摆花瓶效果。