小图标和文字的居中对齐-小总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小图标和文字的居中对齐-小总结相关的知识，希望对你有一定的参考价值。
小图标和文字的居中对齐问题，相信大家在很多时候会遇到。今天楼主从其他大神那边扒了一些方法，现在做个小小的总结。
说明：本次用到的小图标来自阿里巴巴矢量图，大家可以去找一下（地址：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是为了调试位置的，可能不够居中，不过没关系啦，这个不是重点。
好啦，这就是我今天一上午总结的成果，欢迎指正！马上就是五一啦，超级激动啊！！！
以上是关于小图标和文字的居中对齐-小总结的主要内容，如果未能解决你的问题，请参考以下文章