0

product-large という div があり、その中に子として img があります。構造は次のようになります。

<div class="product-large">
         <img id="product-image" src="http://cf.shopious.com/images/store_logos/thumbnail/2159d3537713da6dd80c80b33c87bbc1ce2c2aac.jpg" alt="">
</div>

問題は、製品画像が中央に配置されておらず、上部に固定されていることです。私はすでに img css で vertical-align: middle を使用しています。どうしてこれなの？

ここで完全な作業サイトを見ることができます（大きな画像の要素を調べてください）

4

4 に答える 4

0

vertical-align: middle の場合、次のものが必要だと思います。

display: table-cell;

画像の

于 2013-06-18T04:22:21.943 に答える
0

これを試して

div * {margin-top:auto; margin-bottom:auto;}

img でさまざまな幅と高さの値を試し、スパンでさまざまなフォント サイズの値を試してみると、それらが常にコンテナーの中央にとどまっていることがわかります。

于 2014-08-01T06:45:09.873 に答える
0

センタリングの代替方法

1) img の固定の高さと幅を取得し、位置を作成します: 画像と div を含む相対位置
2) 画像を 50% 上と 50% 左に配置します (現在、左上隅が中央にあります)
3) マージンを適用します-画像幅の負の半分を残して、画像の高さの負の半分でマージントップを適用します

コンテナと呼ばれる div 内の 200px の猫の画像の例:

.container {position:relative; width:600px; height:600px; background:red;}

.cat {position:relative; height:200px; width:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px;}

JS フィドル リンク - http://jsfiddle.net/qhWLK/

編集: 画像サイズが異なる場合でも、この方法は jQuery を使用して画像サイズを取得し、ページの読み込みまたはドキュメントの準備が整ったときにセンタリング CSS を適用するのに効果的です。

于 2013-06-18T04:28:08.807 に答える