图片和文字垂直居中对齐

对于图片和文字垂直居中对齐,有下面两种情况


inline

如果是 inline ,可以把图片与文字设置为相同的高度

vertical-align 都设置为 middle

1
2
3
4
<div>
<img style="width:30px; height:30px; vertical-align: middle;">
<span style="line-height:30px; vertical-align: middle;">Love this world.</span>
</div>

*如果想让图片比行高更小一点,可以对图片设置 padding

block

如果是 block ,也就是 imgtext 两块内容分别位于左右两侧

可以使用 flex 总局,加上 align-items: center

1
2
3
4
<div style="display: flex; align-items: center;">
<img style="width:20px;">
<span style="line-height:30px;">Love this world.</span>
</div>

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/12/18/image-text-vertical-center/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

检查上传文件的大小