11
图片和文字垂直居中对齐
source link: https://www.itwork.club/2020/12/18/image-text-vertical-center/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
图片和文字垂直居中对齐
Dec 18, 2020CSS4点击
对于图片和文字垂直居中对齐，有下面两种情况
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 ，也就是 img 和 text 两块内容分别位于左右两侧
可以使用 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/
版权声明: 转载请注明出处
体验小程序「简易记账」
关注公众号「特想学英语」
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK