CSSで画像を水平および中央に配置する方法

質問: CSS で画像の水平方向の中央揃えを実現するにはどうすればよいですか?方法: margin: auto; 属性を使用して左右のマージンを等しく設定し、水平方向の中央揃えを実現します。画像の幅を設定し、画像サイズを指定します。画像の表示属性をブロック要素に設定して、画像を水平方向の中央に配置します。

CSS で画像の水平方向の中央揃えを実現する方法

方法:

margin: auto; 属性を使用します。このプロパティは要素の水平方向と垂直方向のマージンを自動的に設定し、要素を水平方向に中央揃えにします。

詳細な手順:

1. 画像要素を選択します: CSS セレクターを使用して、水平方向の中央に配置する画像要素を選択します。例: img
2. margin: auto; 属性を適用します: 選択した画像要素に margin: auto; 属性を適用します。これにより、要素の左右のマージンが自動的に同じ値に設定され、水平方向の中央に配置されます。
3. 画像の幅を設定します: 画像を水平方向の中央に配置するには、画像の明確な幅を設定する必要があります。幅は width 属性を使用して設定できます。
4. 画像表示モードを設定します。 画像が水平方向に中央揃えに配置されるように、画像の display 属性を block 要素に設定します。それ以外の場合、画像はインライン要素として表示され、水平方向の中央に配置できません。

サンプル コード:

img {
  width: 200px;
  display: block;
  margin: auto;
}

その他のメソッド:

• を使用します。 text-align: center; プロパティ: このプロパティは通常、テキストの配置に使用されますが、画像を水平方向に中央揃えするために使用することもできます。 image 要素の親要素に text-align 属性を適用し、画像に display: inline-block; を設定します。
• float: left および float: right 属性を使用します。 この方法は、正確なセンタリングが必要な状況には適していませんが、可能です。画像をほぼ中央に配置します 中央に配置します。 float: left; を image 要素に適用し、float: right; を image 要素の後続の要素に適用します。

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