单行图片与文字垂直居中

2018/08/1711:59:15 发表评论 189

单行图片与文字垂直居中核心关键,是在img标签中的style属性加入"vertical-align:middle;"样式。如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的。注意如下的代码的img标签,没有设置任何的style属性。

<img alt="默认,元素放置在父元素的基线上" style="vertical-align: baseline;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />
<img alt="把元素的顶端与行中最高元素的顶端对齐" style="vertical-align: top;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />
<img salt="把元素放置在父元素的中部" tyle="vertical-align: middle;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />
<img alt="把元素的底端与行中最低的元素的顶端对齐" style="vertical-align: bottom;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />
<img alt="把元素的顶端与父元素字体的顶端对齐" style="vertical-align: text-top;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />
<img alt="把元素的底端与父元素字体的底端对齐" style="vertical-align: text-bottom;" src="*.jpg" alt="单行图片与文字垂直居中" width="100px" />

对于vertical-align属性,唯一值得注意的是,不要放在div中,因为div、span这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

当没有高度或行高时,我们只要简单的对内联元素设置为vertical-align:middle就可以了。此外对于一个图片和文字的高度相差无几的,不用这个样式也是可以的。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: