img画像を中央寄せで表示する(ネイティブ CSSとBootstrap)

imgタグはインライン要素なので、ブロック要素にして左右のマージンをauto にすることで、画像を中央寄せにすることができます。

BootstrapではCSSのclassとして準備されていますが、Bootstrap3とBootstrap4とで指定するclass名が異なります。

CSSで指定する

ここではsampleクラスを作成しています。

CSS

.sample {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
HTML

<img class="sample" src="sample.jpg" />

Bootstrapでclassを利用する

Bootstrapでは、バージョンによって指定するクラス名が異なります。

Bootstrap4

Bootstrap4では、”d-block”と”mx-auto”を指定します。

HTML

<img class="d-block mx-auto" src="sample.jpg" />

Bootstrap3

Bootstrap3では、”center-block”を指定します。

HTML

<img class="center-block" src="sample.jpg" />

Related Posts