实现图标Icon+⽂字在div⾥⾃动中⼼居中（⽔平垂直居中）已知div⾏⾼设置text-align:center⽂字会⾃动居中。
通过:before来设置icon的地址和⾼宽。
需要设置图⽚默认的垂直居中条件，与⽂字⼀致，为text-bottom。
设置图⽚⾏级显⽰。
<!Doctype html>
<html>
<head>
<style>
body{margin:0;padding:0;}
.con{position:absolute;width:500px;height:50px;border:1px red solid;
line-height:50px;color:green;text-align:center;
}
html span 居中.txt{font-size:20px;}
.txt:before{
content:'111';
background-image:url('icon.png');
background-size:20px 20px;
vertical-align:text-bottom;
display:inline-block;
width:20px;
height:20px;
border:0;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="con">
<span class="txt">我是三哥四哥五哥⼀个字</span>
</div>
</body>
</html>
实际效果，图标和⽂字会⾃动在div⾥中⼼居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。