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

Div 内での中央揃え: 視覚的な配置の達成

Web 開発の領域では、要素の配置は、視覚的に魅力的で機能的なデザインを作成するために重要です。 。 div 内の画像を扱う場合、画像が水平方向と垂直方向の両方で中央に配置されていることを確認することが重要になります。

次の HTML スニペットを考えてみましょう:

<div>
<p>デフォルトでは、画像は次の位置に配置されます。 div の左上隅。完璧なセンタリングを実現するには、CSS プロパティの組み合わせが必要です。</p>
<p><strong>水平センタリング:</strong><br>画像を水平方向にセンタリングするには、次の CSS ルールが使用されます:</p>
<pre class="brush:php;toolbar:false">#over img {
  margin-left: auto;
  margin-right: auto;
}

このコードは、画像の左右の余白を自動的に調整して画像内で等間隔になるようにブラウザに指示します。 container.

垂直中央揃え:
垂直中央揃えの場合、表示プロパティが機能します:

#over img {
  ...
  display: block;
}

表示: ブロックを設定すると、画像が次のように動作するようになります。ブロック レベルの要素。div 内の利用可能な幅全体を占めます。

これらの CSS ルールを組み合わせたものは、効果的に中央に配置されます。画像を水平方向と垂直方向の両方に配置すると、div 内で完全に位置合わせされた画像が得られます。