关于图片行内元素对齐的问题

如果一个图片作为一个行内元素在一个 html 行里面:

<p id="sample-line">
    Some texts inline here.
    <img class="icon" src="icon.png" />
</p>

然后我们希望图片和文字和谐相处,在我们设定的行高里面垂直对齐,然后我们这样来写 css:

#sample-line {
    line-height: 20px;
    .icon { display: inline-block; width: 20px; height: 20px; }
}

想一下当然,这样的组合应该要行高固定位 20px,然后文字和图片恰好卡在中间。

事实不如所愿,这样的话,会出现这样的情况:

  • 行高超过 20px
  • 图片靠上,文字靠下

这到底是肿么了?

一直我都是通过给图片 float:left 这一种方法来解决的,但是有时候我们不需要 float

然后我再去找答案,终于有一个完美的解法:

http://stackoverflow.com/q/6664460/2544762

那就是,在 img 上面设置一个 vertical-align: bottom

#sample-line {
    line-height: 20px;
    .icon { 
        display: inline-block; width: 20px; height: 20px; 
        vertical-align: bottom;
    }
}

这样最后的效果就和我们最初预想的一样了,不需要抓狂了!


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/12/css-image-vertical-align.html【关于图片行内元素对齐的问题】

发表评论

电子邮件地址不会被公开。 必填项已用*标注