标题栏中小图标和文字垂直居中的解决办法
我们差不多都遇到过这种情况 就是top栏里经常会有图标和文字不对齐的状态 如下图所示:
结构是
<div class="parent"> <i class="icon"></i> <span>中国</span> </div>
这里时候的css是
.parent{ width: 100%; height: 30px; background: #000000; } .icon{ display:inline-block; width: 14px; height: 30px; background: url(img/flag.jpg) no-repeat center; margin-left: 20px; } span{ font-size: 12px; color: #ffffff; }
因为这样看起来是文字没有垂直居中,我们一般会将行高与包含块高度设为一致,来实现文字的垂直居中。
所以我们会给span里设置line-height.
span{ font-size: 12px; color: #ffffff; line-height: 30px; }
但结果并没有用,效果依然如上图所示。
解决的办法我粗劣的总结了三种。
第一种是浮动法,将文字和图片所在的块全部浮动。
.parent{ width: 100%; height: 30px; background: #000000; color: #FF0000; clear: both; } .icon{ display:inline-block; width: 14px; height: 30px; background: url(img/flag.jpg) no-repeat center; margin-left: 20px; float: left; } span{ font-size: 12px; color: #ffffff; line-height: 30px; float: left; }
效果如下:
可以看出来基本上是垂直居中了。兼容性 只测了ie8和Chrome,如果有什么不兼容的以后再加上。缺点就是要记得给父元素清楚浮动。
第二种方法 是绝对定位法:
css样式表如下
.parent{ width: 100%; height: 30px; background: #000000; color: #FF0000; position: relative; } .icon{ display:inline-block; width: 14px; height: 30px; background: url(img/flag.jpg) no-repeat center; margin-left: 20px; } span{ font-size: 12px; color: #ffffff; line-height:30px; position: absolute; }
效果图如上。
这个方法的关键点就是只要将文字绝对定位就可以了。兼容性在ie8和chrome都没毛病。要记得将父元素设为相对定位。
以上两个方法有一点很关键 就是一定要写上line-height:30px; 如果不写的话 文字会顶到最上面 如下图所示
第三种方法略有不同 vertical-align法
这个方法的css更为简洁
.parent{ width: 100%; height: 30px; background: #000000; color: #FF0000; } .icon{ display:inline-block; width: 14px; height: 30px; background: url(img/flag.jpg) no-repeat center; margin-left: 20px; vertical-align: middle; } span{ font-size: 12px; color: #ffffff; }
效果图如下,可以看出是很完美的垂直居中。
这个方法呢 我是在图片里面加了一句 vertical-align: middle;就可以了
网上说可能会出现一定兼容性问题,但我测出来ie7,ie8 chrome都没有问题,如果之后有问题再说。
这个方法呢 就是代码简洁,而且所有的元素都在文档流里面 没有破坏掉原来的文档流。所以是我觉得很好的一个方法。
以上三种方法呢 它的原理都非常的简单。但太晚了 明天有空再补充
1.本站默认解压密码为:xiaoqingtai.com
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » 标题栏中小图标和文字垂直居中的解决办法
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » 标题栏中小图标和文字垂直居中的解决办法