新手前端一枚，在排版时经常碰到图片（主要是图标）和文字同一行排版时，vertical-align不起作用的问题，导致图片和文字总是不能剧中对齐。这个该如何处理，有什么好的解决方法吗？
最佳解决方案
要实现图片混排文字垂直居中对齐的方法有很多，这里介绍最简单的一种，就是把图片作为父元素背景图片，左对齐、居中、不平铺。文字正常设置 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>
打赏
0
1
1
