首页 > 代码库 > 实现图标Icon+文字在div里自动中心居中（水平垂直居中）
实现图标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;
}
.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里中心居中
实现图标Icon+文字在div里自动中心居中（水平垂直居中）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。