CSS で要素をセンタリングする

要素をセンタリングするのなんか簡単と思っていたけど、それは昔 <center> タグなんて便利なものがあったから。<center> タグは HTML4で非推奨、HTML5で廃止されているので CSS で何とかしなければならない。記述方法は、センタリングしたい要素がインライン要素なのかブロック要素なのかによって記述が変わってくるし、複数の要素を持つ場合に意図した見栄えにするのに苦労することが多いので備忘録としてメモを残すことにした。

インライン要素をセンタリングする

インライン要素をセンタリングするのは、text-align: center を利用すればよい。

<div style="text-align: center;">
<span>display:inline な要素</span>
</div>

複数並べると、以下のようになる。

デフォルトでインラインになる要素には、<a> <b> <i> <span>などがある。新たに内容ブロックを形成しない要素なので、複数記述したときは横に並んで表示される。
インライン要素は、

高さ、幅は指定できない
内側にブロック要素をおけない

ため、実際にはブロック要素をセンタリングする方が、実際には多いだろう。

ブロック要素をセンタリングする

ブロック要素をセンタリングする場合は、幅を指定して左右のマージンを auto に設定する。ブロック要素の幅を指定しないと、横幅いっぱいに広がってしまうためセンタリングされない。

<div>
<div style="width: 100px;margin: 0px auto;">display:block な要素</div>
</div>

デフォルトでブロックになる要素には、<p> <table> <h(1～6)> <div>などがある。インライン要素と異なり、高さも幅もマージンもパディングも指定できるが、段落のように整形されるため、複数のブロック要素を並べると縦に並ぶ。つまり、見た目にはブロック要素を並べると、要素ごとに改行されているように見える。

複数並べると、以下のようになる。

ブロック要素を並べるためには、回り込みを設定する float を指定すればよいが、簡単にはセンタリングできなくなる。複数の要素を並べた状態でセンタリングを行いたい場合は、インラインブロックを利用した方が簡単だった。

複数のブロック要素をセンタリングする

複数の要素を横に並べてセンタリングする場合、display:inline-block を利用するのが最も簡単だった。インラインブロックは、インラインのブロックとして生成されるが、内部はブロック要素として扱われる。インライン要素のように使えるが、高さや幅を指定できる。

<div style="text-align: center;">
<div style="width: 100px;display: inline-block;">display:inline-block</div>
<div style="width: 100px;display: inline-block;">display:inline-block</div>
<div style="width: 100px;display: inline-block;">display:inline-block</div>
</div>

上記の例では、内部に記述された3つの<div>を、センタリングした状態で横に並べて表示する。横に並べて表示できるほど親要素の幅が大きくない場合は、次の行にセンタリングした状態で表示する。

実際に表示すると、以下のようになる。