码迷,mamicode.com
首页 > 其他好文 > 详细

标题栏中小图标和文字垂直居中的解决办法

时间:2017-08-07 00:21:53      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:text   position   垂直   关键点   原理   play   样式   垂直居中   解决办法   

我们差不多都遇到过这种情况 就是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都没有问题,如果之后有问题再说。

这个方法呢 就是代码简洁,而且所有的元素都在文档流里面 没有破坏掉原来的文档流。所以是我觉得很好的一个方法。

 

以上三种方法呢 它的原理都非常的简单。但太晚了 明天有空再补充

 

标题栏中小图标和文字垂直居中的解决办法

标签:text   position   垂直   关键点   原理   play   样式   垂直居中   解决办法   

原文地址:http://www.cnblogs.com/ada-blog/p/7282680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!