CSSで画像を縦方向中央揃えにする方法を詳しく解説

【はじめに】前回の淘宝UEDの募集で「純粋なCSSを使用して、200px四方のコンテナ内でサイズ不明の画像（ただし高さと幅が200px未満）の水平方向と垂直方向のセンタリングを実現してください。」という質問がありました。もちろん、質問はランダムではありませんが、実際的な理由があります。淘宝網の仕事では垂直方向の中央揃えが最も重要です。過去の淘宝網 UED の募集では、「純粋な CSS を使用してサイズが不明な画像を実装してください (ただし、高さと幅は 200 ピクセル未満です)" 200 ピクセルの正方形のコンテナー内で水平方向と垂直方向の中央揃え。"

もちろん、この質問は恣意的なものではなく、独自の実際的な理由があります。垂直方向の中央揃えは、淘宝網で最もよく遭遇する問題です。それは非常に代表的なものです。

質問の難しさは次の 2 つの点にあります:

1. 垂直方向に中央揃え;

2. 画像はいくつかの特殊な特徴を持つ置換要素です。

それを解決する方法については、比較的きれいな構造とシンプルな CSS を備えたバランスの取れた解決策を次に示します:

.box {

/*IE 以外の主流ブラウザで認識される垂直方向の中央揃え方法*/

display: table-cell;

vertical-align:middle;

/*水平方向の中央揃えを設定*/

text-align:center;

/* IE 用のハック */

*display: block ;

*font-size: 175px;/*高さの約 0.873、200*0.873 は約 175*/

*font-family:Arial;/*非 utf-8 によって引き起こされるハッキング失敗の問題を防止します。 gbk エンコードなど*/

width:200px;

height:200px;

border:1px Solid #eee;

}

.box img {

/*画像を縦方向中央に設定する*/

vertical-align:middle;

}

以上がCSSで画像を縦方向中央揃えにする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。