小图标和文字的居中对齐问题，相信大家在很多时候会遇到。今天楼主从其他大神那边扒了一些方法，现在做个小小的总结。
说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：http://www.iconfont.cn/plus/collections/detail?cid=3223）我的图标尺寸是20px*20px
第一种办法：vertical-align和line-height结合
特点：这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况。
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 20px;
line-height: 20px;
box-sizing: border-box;
}
img {
vertical-align: middle;
box-sizing: border-box;
}
span {
vertical-align: middle;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="../img/whale.png" />
<span>鲸鱼宝宝</span>
</div>
</body>
</html>
第二种办法：使用背景图去做
特点：兼容性非常好
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span {
height: 40px;
line-height: 40px;
padding-left: 24px;
box-sizing: border-box;
background: url(../img/whale.png) left center no-repeat;
}
</style>
</head>
<body>
<p>
<span>鲸鱼宝宝</span>
</p>
</body>
</html>
上述代码的height和line-height可以去掉，这两个设置不是必须的。
看到的其他：
第三种办法：display:table+vertical-align
特点：不是所有的浏览器版本都支持display:table
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
background: lightcoral;
color: #fff;
height: 45px;
width: 120px;
border-radius: 5px;
text-align: center;
display: table;
box-sizing: border-box;
}
.img_box {
display: table-cell;
vertical-align: middle;
}
img {
vertical-align: text-top;
}
</style>
</head>
<body>
<div class="box">
<div class="img_box">
<img src="../img/whale.png" />
<span>鲸鱼宝宝</span>
</div>
</div>
</body>
</html>
ps:配色可能有些奇怪，还请不要介意哈，哈哈哈哈！
第四种：position:absolute+transform: translate(0, -50%)
特点：没有办法的办法！
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
background: lightcoral;
color: #fff;
height: 45px;
width: 120px;
border-radius: 5px;
position: relative
}
img,
span {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
img {
padding-left: 12px;
}
span {
margin-left: 40px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/whale.png">
<span>鲸鱼宝宝</span>
</div>
</body>
</html>
ps：padding-left和margin-left是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。
好啦，这就是我今天一上午总结的成果，欢迎指正！马上就是五一啦，超级激动啊！！！
时间： 2024-10-18 13:08:55