web-dev-qa-db-ja.com

ディスプレイテーブルセルを備えた垂直方向の中央が画像で機能しない

私は垂直方向の配置を使用しようとしています：レイアウトの真ん中に、時にはテキスト、時には画像を垂直方向に中央揃えしますが、それはテキストでのみ機能しています。誰に理由を教えてもらえますか？

HTML：

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS：

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ 私もフィドルを作成しました

cssvertical-alignmentcss-tables
16
Elaine Marley

border: 1px solid blackあなたのimg, spanタグ、ブラウザdevの両方の要素を検査します。コンソール。スパンのデフォルトは親の高さの100％ですが、画像には定義された高さ（実際の画像の高さ）があります。

したがって、実際にはdivに対してこれらの要素を垂直方向に揃えるのではなく、span要素内のテキストをspanに対して垂直方向に揃えるだけです:)

垂直方向のセンタリングにテーブルを本当に使用したい場合、正しいコードは次のとおりです。 http://jsfiddle.net/WXLsY/

（vertical-alignおよびdisplay:table-cell親に移動し、それらにラッパーテーブルが必要です）

しかし、これを行う方法は他にもあります（SOにはこの質問に対する多くの答えがあります。検索を使用してください）

22
nice ass

問題を解決する1つの方法を次に示します。

HTML：

<div>
    <span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div> 
    <span> text </span>
</div>

imgをspanに入れてください。画像は置換された要素であり、子コンテンツを含むことはできません。したがって、vertical-alignは機能しません。

CSS：

div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

デモを参照してください： http://jsfiddle.net/audetwebdesign/Fz6Nj/

これにはいくつかの方法がありますが、display: table-cellを親div要素に追加しますが、別のアプローチになります。

4
Marc Audet

テーブルセル内の画像を垂直方向に配置するには、画像にブロックを表示する必要があります。

display: block
margin: 0 auto

マージン：0 autoは、画像を中央に揃えます。画像を左揃えにする場合は、これを含めないでください。画像を右揃えにする場合は、次を追加できます。

float: right

ありがとう、G

0
Gregg Od