标题栏中⼩图标和⽂字垂直居中的解决办法我们差不多都遇到过这种情况就是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;
css设置文字垂直居中
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都没有问题，如果之后有问题再说。
这个⽅法呢就是代码简洁，⽽且所有的元素都在⽂档流⾥⾯没有破坏掉原来的⽂档流。所以是我觉得很好的⼀个⽅法。
以上三种⽅法呢它的原理都⾮常的简单。但太晚了明天有空再补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。