CSSでimgの水平方向のセンタリングを設定する方法

CSS を使用して img 要素の水平方向の中央揃えを設定するには、次の 4 つの方法があります。1. text-align を使用して親要素を中央に配置します。2. margin: auto を使用して、親要素を基準にして要素を中央に配置します。 3. フレックスボックスを使用し、親要素の表示をフレックスに設定し、コンテンツを中央に配置します。 4. グリッド レイアウトを使用して、グリッドを作成し、中央のセルに img 要素を配置します。

#CSS での img の水平方向の中央揃えの設定

img 要素を水平方向に中央揃えにする方法は?

CSS では、img 要素を水平方向に中央揃えする方法がいくつかあります。

1. text-align

最も簡単な方法

text-align 属性は、img 要素の親要素を中央揃えに設定するために使用されます。

<code class="css">.parent-container {
  text-align: center;
}</code>

2. margin: auto

もう 1 つの方法は、

margin: auto を使用して、img 要素をその親要素に対して相対的にすることです。中心。

<code class="css">img {
  margin: auto;
}</code>

3. flexbox

フレックスボックス レイアウトを使用すると、親要素の

display: flex および justify-content: を設定することもできます。 center は、img 要素を水平方向の中央に配置します。

<code class="css">.parent-container {
  display: flex;
  justify-content: center;
}

img {
  align-self: center;
}</code>

4. グリッド

グリッド レイアウトを使用して、グリッドを作成し、グリッド内の中央のセルに img 要素を配置できます。

<code class="css">.parent-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

img {
  grid-column: 2;
}</code>

適切な方法を選択してください

どの方法を選択するかは、プロジェクトの特定の要件によって異なります。ほとんどの場合、

text-align または margin: auto を使用するだけで十分です。ただし、より高度なレイアウトや制御が必要な場合は、フレックスボックスまたはグリッド レイアウトの方が適切な選択となる場合があります。

以上がCSSでimgの水平方向のセンタリングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。