Html 内联块内的CSS垂直对齐

我试图用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>

.按钮{
背景：#ccc；
显示：内联块；
填充：6px 6px 5px 6px；
线高：16px；
高度：16px；
位置：相对位置；
垂直对齐：文本底部；
}
.按钮.图标{
背景图片：url（“../images/button down.png”）；
显示：内联块；
高度：16px；
宽度：16px；
保证金：0；
文本缩进：-9999px；
溢出：隐藏；
背景重复：无重复；
位置：相对位置；
}

当图标出现时，文本向下移动。我需要一些帮助来理解为什么图标块会影响前面文本的位置。

只需添加

  vertical-align: middle;

到

。图标

类。小提琴：
（如本属性的默认值为基线中所述）