web-dev-qa-db-ja.com

インライン/インラインブロック要素のCSS垂直方向の配置

inlineでいくつかのdivおよびinline-blockコンポーネントを垂直に並べようとしています。この例の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;
}

結果：
enter image description here

フィドル

htmlcssvertical-alignment
133
Yarin

vertical-alignは、親要素ではなく、整列される要素に適用されます。 divの子を垂直に配置するには、代わりにこれを実行します。

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

参照： http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE：vertical-alignは、親のdivの全高ではなく、現在のテキスト行に対して相対的です。親のdivをより高くし、要素を垂直方向の中央に配置したい場合は、divの代わりにheightのline-heightプロパティを設定します。例については、上記のjsfiddleリンクに従ってください。

252
Diego

aおよびspanでvertical-align:top;を指定します。このような：

a, span{
 vertical-align:top;
}

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

23
sandeep

両方の要素を単純に浮かせるだけで同じ結果が得られます。

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;
}
4
HoldTheLine