画像を中央に配置する方法
画像を中央に配置する方法を説明します。
画像を中央に配置する方法は複数あります。
- フレックスボックスを使う方法
- グリットレイアウトを使う方法
- marginで真ん中に寄せる方法
<div class="wrapper">
<figure class="photo"><img src="画像のファイル"></figure>
</div>
一つ目はフレックスボックスでセンターにします。
.wrapper{
display: flex;
justify-content: center;
}
2つ目はグリットレイアウトでセンターにします。
.wrapper{
display: grid;
place-items: center;
}
3つ目はmarginで真ん中寄せにします。
.photo{
width: 200px;
margin: 0 auto;
}
.画像が中央に配置されました。
まとめ
画像を中央に配置するにはフレックスボックス、グリットレイアウト、marginを使う方法があります。