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 значением по умолчанию для этого свойства является базовый уровень)