画像を Div コンテナ内で水平方向の中央に配置するにはどうすればよいですか?

コンテナ Div 内で画像を水平方向に中央に配置する方法

問題:

が必要です画像を含む div 要素内で画像を水平に配置します。問題のある設定の HTML と CSS は次のとおりです:

<div>
<pre class="brush:php;toolbar:false">#thumbnailwrapper {
  ...
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
}

解決策:

コンテナ内で画像を水平方向の中央に配置するには、次の CSS を使用します。

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

このコードは、画像をブロック要素として表示することと、それをブロック要素として表示することを指定します。すべての辺に自動マージンが設定されます。これにより、画像がコンテナ内で水平方向の中央に配置されます。

説明:

表示: ブロック。プロパティは、画像をブロック要素として扱うことを指定します。これは、コンテナの全幅を占有し、その周囲のテキストの流れを中断することを意味します。

マージン: auto;プロパティは、画像のすべての辺のマージンを自動に設定することを指定します。これは、画像がコンテナ内で中央に配置されるようにブラウザが自動的に余白を計算することを意味します。

このソリューションにより、コンテナや画像のサイズに関係なく、画像がコンテナ内で水平方向に中央に配置されます。