inline / inline-block要素のCSS垂直方向の配置

私はいくつかの取得しようとしている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のline-heightプロパティを設定しheightます。例として、上記のjsfiddleリンクに従ってください。

付けvertical-align:top;でa＆span。このような：

a, span{
 vertical-align:top;
}

これを確認してくださいhttp://jsfiddle.net/TFPx8/10/

両方の要素を左にフローティングするだけで同じ結果が得られます。

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

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

span {
background:red;
display:inline-block;
float:left;
}

inline-blockアイテムの位置を微調整するには、上と左を使用します。

  position: relative;
  top: 5px;
  left: 5px;

CSS-Tricksありがとうございます！