CSS 图片 垂直 布局 与文字对齐 vertical-align

在 HTML 代码中,有时会需要在文字旁边加上一个图标。

默认情况,是图片置顶对齐,文字置底对齐,这样一来,文字和图片排列在一起就很难看,如图:

Vertical Align

代码是:

 更多

查一下CSS2手册,找到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尚不支持。请参阅长度单位

为了布局更好看,我选择了text-bottom,让文字与图片在同一水平线上,效果好多了:

Vertical Align

代码如下:

 更多

只是在img标签中加入了vertical-align的css定义。

rss.png图片是网上找的,如果你想要,那就下载我提供的这个链接:

http://down.leakon.com/software/2007/10/rss.png

RSS

2 comments

Leave a Reply

Your email address will not be published.

*