[解決済み] CSS による inline/inline-block 要素の垂直方向のアラインメント

質問

複数の inline と inline-block コンポーネントを縦に並べて div . どうして span この例では、押し下げられることにこだわっているのでしょうか？試しに vertical-align:middle; と vertical-align:top; と表示されますが、何も変わりません。

HTMLです。

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSSです。

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

RESULT:

FIDDLE

解決方法は？

vertical-align は、整列される要素に適用され、その親要素には適用されません。div の子要素を縦に揃えるには、代わりに次のようにします。

div > * {
    vertical-align:middle;  // Align children to middle of line
}

ご覧ください。 http://jsfiddle.net/dfmx123/TFPx8/1186/

ノート : vertical-align は現在のテキスト行に対する相対値であり、親である div . もし、親である div の背を高くし、なおかつ要素を垂直方向に中央配置にするために div 's line-height プロパティの代わりに height . フォロー jsfiddle のリンクをクリックすると、その例が表示されます。