內聯塊內的CSS垂直對齊

Question

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

<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中所述 ，此屬性的默認值為基線）