【小技巧】小图标和文字的居中对齐-小总结
到做项目遇到这个问题，发现以下方法用起来，都不如另一种办法最好用。（背景图的方法也很好用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ margin:100px 100px; } img{ float: left; /*宽高根据UI图去写*/ width: 10px; height: 10px; } .div{ float: left; /*行高跟着图片的高度走，要一致*/ line-height: 10px; } span{ font-size: 20px; } </style> </head> <body> <div class="box"> <img src="images/sea.png" alt=""> <div class="div"><span>天使</span></div> </div> </body> </html>
嵌套就嵌套呗，重点是有用，这是关键，而且屡试不爽。
以上是6月16的更新。。。
以下是4月28的文字。。。
小图标和文字的居中对齐问题，相信大家在很多时候会遇到。今天楼主从其他大神那边扒了一些方法，现在做个小小的总结。
说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：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可以去掉，这两个设置不是必须的。
更正:楼主错了，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是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。
好啦，这就是我今天一上午总结的成果，欢迎指正！马上就是五一啦，超级激动啊！！！
