內聯塊內的CSS垂直對齊

Question

我想用CSS來設置一些按鈕的樣式，而我的按鈕容器是一個內嵌塊，文本垂直居中使用行高。問題是當我使用另一個內嵌塊向按鈕添加圖標時，它似乎調整了前面文本的垂直對齊，儘管圖標在中間正確對齊。

<style> 
.button { 
    background: #ccc; 
    display: inline-block; 
    padding: 6px 6px 5px 6px; 
    line-height: 16px; 
    height: 16px; 
    position: relative; 
    vertical-align: text-bottom; 
} 
.button .icon { 
    background-image: url("../images/button-down.png"); 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    margin: 0; 
    text-indent: -99999px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
    position: relative; 
} 
</style> 

<!-- with icon --> 
<a href="#" class="button">Save <span class="icon"></span></a> 
<!-- without icon --> 
<a href="#" class="button">Save</a> 

當圖標存在於文本向下偏移。我可以幫助理解爲什麼圖標塊會影響前面文本的位置。

Answer 1

只需添加

vertical-align: middle; 

到.icon類。小提琴：http://jsfiddle.net/JGJtH/。
（正如在https://developer.mozilla.org/en/CSS/vertical-align中說明的這個屬性的默認值是基線）