インラインブロック内での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で説明されているように、このプロパティのデフォルト値はベースラインです）