画像を Div 内で水平方向と垂直方向の両方で中央に配置するにはどうすればよいですか?

Div 内で画像を中央に配置する

Web ページ内で画像の正しい配置を維持することは、多くの場合課題となることがあります。この特定の例では、特定の div 要素内の画像の水平方向と垂直方向の両方の中央揃えを実現するには、的を絞ったアプローチが必要です。

希望の位置合わせを実現するには、画像を水平方向と垂直方向の両方で div 要素の中心に配置する必要があります。そして縦方向に。これを行うには、次の CSS プロパティを使用できます。

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

これらのプロパティがどのように機能するかを詳しく説明します。

1. margin-left: auto;および margin-right: auto;: これらのプロパティは、画像要素の左右のマージンを自動的に調整し、親コンテナ (div 要素) の中心に向かって押し出します。
2. display : block;: このプロパティは、イメージ要素がブロックレベルの要素のように動作し、親コンテナの全幅を占めるようにします。これにより、画像が div 内の他の要素の上に重なることがなくなります。

これらの CSS プロパティを適切に設定すると、画像は div 要素の中央と中央に配置され、目的の結果が得られます。位置合わせ。

以上が画像を Div 内で水平方向と垂直方向の両方で中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。