0

画像をウェブサイトの中央に配置したいと思います。ウィンドウのサイズが変更されるときよりも、画像の中心が画像の垂直方向の中心になるように、サイズを変更するのではなく、ブラウザ ウィンドウで左右にトリミングする必要があることを確認したいと思います。

<div class="image-container">
    <img src=imgpath/image.jpg">
</div>

私はこれを試しました：

.image-container img{
   width: 100%;
   min-width: 1440 !important;
   margin: 64px auto 0 auto;
   height: auto;
   min-height: 400px !important;
}

img {
   vertical-align: middle;
}

これをどのように作成するかについて、誰かアイデアを持ってください。jqがすべきではない場合、私はCSSを好むでしょう。

4

1 に答える 1

1

display:table-cell内側の画像をdivの中央に揃えるために使用できます。

ただし、この場合、table-cell は div を強制的に td として機能させ、技術的にはテーブル td にマージンを与えることができないため、マージンを与えることはできません。

そのため、白い色で div に境界線を追加しました。

.image-container{
  background: #C8BFE7;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  border:white 5px solid
}

</p>

デモ: http://jsfiddle.net/Arav8/3/

于 2013-01-03T14:22:03.593 に答える