内联块内的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中说明的这个属性的默认值是基线）