1

3 つの要素を使用して、高さが不明な要素を垂直方向にセンタリングする実際の例があります。

<section>
    <div>
        <img src="http://placehold.it/100x100"/>
    </div>
</section>​

そしてCSS：

section {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

div {
  display: table-cell;
  vertical-align: middle;
}

ここにも JSFiddle の例があります: http://jsfiddle.net/Y6KS9/

ただし、可能であれば不要なラッパーの使用は避けたいと思います。たとえば、img 自体を table-cell として表示する:

div {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

img {
  display: table-cell;
  vertical-align: middle;
}
​

ただし、これは機能しません。http://jsfiddle.net/U2c9R/ の JSFiddle の例を参照してください。imgはdiv 内の中央に配置されていません。

2 つの要素のみを使用して、サイズが不明な画像を親内で垂直方向に中央揃えすることは可能ですか?

編集:私は Flexbox を認識しており、IE9 が終了したら、テーブル セルのハックを完全に破棄するつもりです。しかし、今は古いブラウザをサポートする必要があります。

4

1 に答える 1

1

CSS3 Flexible Box Modelを使用してみてください。

ブラウザの可用性を確認する必要があります。-webkitベンダー プレフィックスからわかるように、私の例は現在、-webkitベースのレンダリング エンジンでのみ動作します。しかし、最新のブラウザのほとんどで動作すると確信しています。

フレキシブル ボックス モデルをサポートするブラウザの概要は次のとおりです: http://caniuse.com/#feat=flexbox

div {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    height:100%;
    width:100%;
    position:absolute;
}

例： http: //jsfiddle.net/U2c9R/4/

アップデート

CSS3 フレキシブル ボックス モデルのクロスブラウザー サポートについては、Modernizrと、およびのサポートを追加する適切なPolyfillを使用できます。唯一のヒントは、これは JavaScript なしでは機能しないということです。しかし、これはオプションですか？IE 6-9Opera 10.0+

于 2012-12-17T11:59:56.070 に答える