標題欄中小圖標和文字垂直居中的解決辦法

咱們差很少都遇到過這種狀況 就是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都沒有問題，若是以後有問題再說。

這個方法呢 就是代碼簡潔，並且全部的元素都在文檔流裏面 沒有破壞掉原來的文檔流。因此是我以爲很好的一個方法。

 

以上三種方法呢 它的原理都很是的簡單。但太晚了 明天有空再補充