图片和文字垂直居中对齐

Dec 18, 2020CSS点击

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

inline

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

vertical-align 都设置为 middle

<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 ，也就是 img 和 text 两块内容分别位于左右两侧

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

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

体验小程序「简易记账」

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

图片和文字垂直居中对齐

图片和文字垂直居中对齐

inline

block

为您推荐