2

私は3レベルの構造を持っています:

<div class="workingArea">
 <div class="imageContainer">
  <img class="theImage" />
 </div>
</div>

「workingArea」のサイズは、ブラウザーのサイズによって決まります (親で flex を使用)。「imageContainer」のサイズは、読み込まれた画像のサイズによって決まります (画像によって異なります。各画像のサイズは異なります)。

イメージ コンテナを作業領域の中央に配置したいと考えています。

「imageContainer」のサイズは画像によって決定されるため、作業領域のサイズよりも大きくなる可能性があります。その場合、画像の中心を作業領域 (画像は左右にオーバーフローする必要があります)。

フレックスを使用してみましたが、垂直方向と水平方向ではなく、垂直方向にのみ中央揃えできます。

JSFiddle での問題シミュレーション

ありがとう！

4

3 に答える 3

0

あなたの防弾ソリューションは次のようなものになると思います：

.workingArea {
    display: table;
}
.imageContainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
.imageContainer img {
    max-width: 100%;
    height: auto;
}

デモは次のとおりです。http://jsfiddle.net/JFrCq/30/

于 2013-08-20T08:33:03.997 に答える