CSS を使用して、サイズの大きい画像を Div 内の中央に配置するにはどうすればよいですか?

CSS を使用して Div 内で特大の画像を中央に配置する

コンテナの幅が異なる流動的なレイアウトを扱う場合、特大の画像を div 内で中央に配置するCSS だけを使用するのは難しい場合があります。コンテナよりも幅の広い画像のデフォルトの動作では、画像を右にオフセットしたまま左に揃えます。

この問題に対処するには、CSS のみに依存するソリューションを実装できます。方法は次のとおりです:

親 div に CSS プロパティを割り当てます:

<code class="css">position: relative;
overflow: hidden;</code>

これにより、配置用のコンテナとして div が設定され、オーバーフローするコンテンツが制限されます。

特大の画像の場合(「子」と呼ばれます)、次の CSS を使用します:

<code class="css">position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;</code>

• 位置: 絶対: 通常のドキュメント フローから画像を取り出します。
• 負の座標: 画像を div の境界を越えて全方向に拡張します。これは配置に重要です。
• 自動マージン: 親 div 内の画像を中央に配置します。

これらの CSS プロパティを使用すると、特大の画像が配置されます。サイズや親の幅に関係なく、親 div の中央に配置されます。負の座標を指定すると、オーバーフローが両端で均等にカットされ、視覚的に満足のいく結果が得られます。

以上がCSS を使用して、サイズの大きい画像を Div 内の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。