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

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

top栏里经常会有图标和文字不对齐的状态 如下图所示

<div class="parent">
     <i class="icon"></i>
     <span>中国</span>
</div>   

效果如下：

处理代码

.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;            
}

网址来源： Ada_blog
网址：https://www.cnblogs.com/ada-blog/p/7282680.html