純粋な CSS を使用してサイズ不明の画像を垂直方向にセンタリングする例の詳細な説明

1.タオバオのやり方

前回の「タオバオUED募集」でこんな質問がありました

「純粋なCSSを使ってサイズ不明（ただし高さと幅が200ピクセル未満）の画像を200ピクセル正方形のコンテナに実装する」 「

もちろん、この質問は恣意的なものではありませんが、独自の実際的な理由があります。垂直方向のセンタリングは淘宝網の仕事で最も一般的に遭遇する問題であり、非常に代表的なものです。」

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

垂直方向のセンタリング;
画像はいくつかの特殊な特性を持つ置換要素です。
これを解決する方法としては、比較的構造的にクリーンで CSS を使用した簡単な回避策を次に示します。中央;

*表示: ブロック;
*フォントサイズ: 175px;
*font-family:Arial;

幅:200px;
高さ:200px;

境界線: 1px 実線 #eee;

}
.box img {

vertical-align:middle;

}

2. 背景メソッド

この方法も非常に簡単ですが、ページに必要な場合は の追加タグを追加する必要があります。または中央に2枚の写真がある場合は、この方法をお勧めしますが、商品の写真が多い場合は、追加するタグの数が多くなります



他の解決策、興味のある友達は、

div{

をクリックしてくださいHeight: 400px;

line-height : 400px;
overflow: hidden;
}

このメソッドは、単一行のテキストまたは画像 + テキストにのみ適用でき、通常、先頭に小さなアイコンがあるリンクまたはタイトルに使用されます。 。

以上が純粋な CSS を使用してサイズ不明の画像を垂直方向にセンタリングする例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。