图片文字混排时图文居中对齐的解决方法

新手前端一枚,在排版时经常碰到图片(主要是图标)和文字同一行排版时,vertical-align不起作用的问题,导致图片和文字总是不能剧中对齐。这个该如何处理,有什么好的解决方法吗?

凌波微肚 T0 发布于6个月前

最佳解决方案

要实现图片混排文字垂直居中对齐的方法有很多,这里介绍最简单的一种,就是把图片作为父元素背景图片,左对齐、居中、不平铺。文字正常设置 vertical-align:middle就可以了。代码如下:

#target{
width: 150px;
border:1px purple solid;
line-height: 40px;
text-indent: 40px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: 0px center;
}
html
<div id="target">
文字垂直居中对齐
</div>



虚空来袭 T0 被采纳率100%
2020-10-28 21:25
打赏 0 0
页面统计
146 访问
0 帮助
0.00 打赏

hierror 2019 © hierror.com 京ICP备13026190号-1

通知消息
  • 暂无任何消息