实现图标Icon+文字在div里自动中心居中(水平垂直居中)

Posted Heyach

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现图标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里自动中心居中(水平垂直居中)的主要内容,如果未能解决你的问题,请参考以下文章

css 怎么实现 div水平居中 呢?

如何让DIV里面的DIV水平垂直居中

急!CSS中,怎么让ul li中的图片和文字横向水平居中

标题栏中小图标和文字垂直居中的解决办法

svg中text标签里面的文字怎么实现垂直和水平的居中

请问:在css和html中下图的样式是怎样实现的?两排文字不在一条水平线,不必套用两个div吧?