1.タオバオのやり方
前回の「タオバオUED募集」でこんな質問がありました
「純粋なCSSを使ってサイズ不明（ただし高さと幅が200ピクセル未満）の画像を200ピクセル正方形のコンテナに実装する」 「
もちろん、この質問は恣意的なものではありませんが、独自の実際的な理由があります。垂直方向のセンタリングは淘宝網の仕事で最も一般的に遭遇する問題であり、非常に代表的なものです。」
問題の難しさは 2 つの点にあります:
垂直方向のセンタリング;
画像はいくつかの特殊な特性を持つ置換要素です。
これを解決する方法としては、比較的構造的にクリーンで CSS を使用した簡単な回避策を次に示します。中央;
*表示: ブロック;
*フォントサイズ: 175px;
*font-family:Arial;
幅:200px;
高さ:200px;
}
.box img {
vertical-align:middle;
div{
をクリックしてくださいHeight: 400px; line-height : 400px;
overflow: hidden;
}
このメソッドは、単一行のテキストまたは画像 + テキストにのみ適用でき、通常、先頭に小さなアイコンがあるリンクまたはタイトルに使用されます。 。
以上が純粋な CSS を使用してサイズ不明の画像を垂直方向にセンタリングする例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
