画像を中央に配置する方法

CSSを使用して画像を中央に配置する方法を学びます。

画像を中央に配置する：

ターリップ

画像を中央に配置する方法

第1ステップ - HTMLを追加する：

<img src="paris.jpg" alt="Paris" class="center">

第2ステップ - CSSを追加する：

画像を中央に配置するために、左右のマージンを設定してください auto、それをブロック要素として設定します：

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

自分で試してみてください

注意してください、幅が設定されている場合 100%（全角），中央に配置できません。

関連ページ

チュートリアル：CSS画像