cssを使って、画像を中央に配置したいときどうしますか？
今回は、それをいくつか紹介します。
早速行ってみます。
1、text-align: center;を使う(※インライン要素のみ)
2、margin: auto;を使う(※ブロック要素のみ)
3、img要素は、インライン要素なので、1、2を踏まえると、display: block;を使ってブロック要素にしてしまう。
4、display: flex;を用いる方法
まだ、いくつかありますが、よく使いそうなものをピックアップしました。
1、2、3、はそのままです笑
4、については、少し説明します。
HTML
<div class=”flex-Box”>
<div class=”flex-Img”>
<img src=”./img/hoge.jpg” />
</div>
</div>
css
.flex-Box {
display:flex
justify-content: center;(boxを左端から右端へのレイアウト位置)
justify-items: center;(boxを上から下へのレイアウト位置)
}
ちなみに、ベンダープレフィックスです(まだcssで試験的運用なcssプロパティということです。)
コメント