CSSを使用してdiv内の画像を中央に配置する方法

CSS の div 内の画像を中央揃えにする方法は次のとおりです: テキストの配置: 画像とテキストの垂直方向の中央揃えに適しています。フレックスボックス: 画像の水平方向および垂直方向の中央揃えに適しています。変換: 固定サイズの画像に対して機能します。自動マージン: 画像の幅がわかっている状況に適しています。

CSSのdiv内の画像を中央揃えにする方法

方法1: text-align

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

この方法は、画像をテキストと一緒に垂直方向の中央に配置したい状況に適しています。

方法 2: flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

flexbox を使用すると、画像を水平方向と垂直方向の中央に配置する必要がある場合に適しています。

方法 3: 変換

<code class="css">div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

この方法は絶対位置決めと変換を使用し、固定サイズの画像に適しています。

方法 4: マージン auto

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

margin: auto は画像を自動的に中央に配置しますが、画像の幅がわかっている場合にのみ使用できます。

以上がCSSを使用してdiv内の画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。