CSSでの要素の水平方向の中央寄せ

はじめに

人に教えられるほど知識がないので、自分へのメモ書き程度にまとめます。もっと参考になるサイト様は最後らへんにURL載せときます。

まず、HTML要素について

中央寄せする際に注意したいのが、HTMLの要素についてです。

HTMLの要素には大きく分けて「ブロックレベル要素」と「インライン要素」の2種類があります。
このどちらかによって中央寄せする方法が変わってきます。

1. ブロックレベル要素

見出しや文章など、基本的な「かたまり」として表示されます。
<div>, <p>, <form>, <h1>~<h6>, <ul>, <dl>, <ol>, <table>などがあります。

2. インライン要素

ブロックレベル要素の中の文章を強調したりと、文章の一部として表示されます。ブロックレベル要素のように、前後が改行され余白ができたりすることはありません。
<a>, <br>, <code>, <em>, <font>, <img>, <input>, <label>, <select>, <small>, <span>, <strong>, <textarea>などがあります。

中央寄せする方法

1. ブロックレベル要素

centering.css

div{
 margin: auto;

 margin: 10px auto;

 margin-right: auto;
 margin-left: auto;
}

ブロックレベル要素は、要素のmarginをautoにしてあげるとできます。

2. インライン要素

centering.css

div{
 text-align: center;
}

これだけです。このdiv（ブロックレベル要素）の中のインライン要素を中央寄せします。

ブロックレベル要素①の中のブロックレベル要素②を中央寄せしたいときは、ブロックレベル要素②のmarginをautoにすれば大丈夫です。

参考文献

CSSで中央寄せする9つの方法（縦・横にセンタリング）-サルカワ
ブロックレベル要素とインライン要素-HTMLクイックリファレンス