cssで要素を中央に配置する方法

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プロパティということです。)

リファレンス:https://webkcampus.com/201501/949/

もりけん塾
もりけん先生ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です