图片和文字对齐设置微调vertical-align

今天做网页，遇到到图片和其紧邻的文字对齐的问题，

图片的高度稍大于文字的高度，因此显得参差不齐，

显得文字没有居中（其实文字已经居中了）

因此决定微调文字，将文字的位置稍稍提高一些

以此用到了 vertical-align

vertical-align的语法：

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 

参数说明：

baseline :  将支持valign特性的对象的内容与基线对齐
sub :  垂直对齐文本的下标
super :  垂直对齐文本的上标
top :  将支持valign特性的对象的内容与对象顶端对齐
text-top :  将支持valign特性的对象的文本与对象顶端对齐
middle :  将支持valign特性的对象的内容与对象中部对齐
bottom :  将支持valign特性的对象的文本与对象底端对齐
text-bottom :  将支持valign特性的对象的文本与对象顶端对齐
length :  CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位

今天我便用到了vartical-align:length;

将文字位置上移3px距离

style="vartical-align:3px;"

length值为正时，组件向上偏移，

当length为负时，组件向下偏移。