1

ページ全体の中央に画像が配置される画像ギャラリーの作成に取り組んでいます。横の部分はもちろん楽ですが、縦の部分は苦労します。

display: table-cell;and vertical-align: middle;(または の使用には慣れてline-heightいますが、それらを使用してページを埋める要素を取得しようとすると成功しません。

<div id='contain'>
   <img src='url' />
</div>

#containコンテナの高さはウィンドウのサイズによって異なるため、行の高さを設定できません。

を絶対に配置すると、ボックスのサイズをどのように設定しても#contain、適用しても画像が垂直方向に中央に配置されなくなります。vertical-align:middle

#contain絶対配置せずにウィンドウを埋めるようにサイズ変更しようとするwidth: 100%とheight: 100%（または最小幅/最小高さを使用して）、ページがいっぱいになりません。繰り返しますが、値はさまざまであるため、正確な値を指定することはできません。

いつでも画像を背景に設定できることはわかっていますが#contain(または JavaScript を使用して高さを計算することもできます)、テーブルなしでこれを解決する CSS/HTML の方法がある場合は、それを使用したいと思います。

4

1 に答える 1

1

img を追加の div でラップしてから、次の css を使用してください。

#contain {
  display: table;
  width: 100%;
  height: 100%;
}
#contain div {
  display: table-cell;
  vertical-align: middle;
}

HTML:

<div id='contain'>
   <div><img src='url' /></div>
</div>
于 2012-07-02T20:02:45.267 に答える