CSS 要素を左右中央に配置する方法

今回は、CSSのレイアウトで非常によく使う左右中央揃えの方法についてです。中央揃えしたい要素がインラインかブロックかで方法が変わってくるので気を付けてください。

インライン要素を左右中央に揃える

インライン要素を左右中央に揃えるには、中央揃えにしたいインライン要素の親のブロック要素に text-align: center; を指定します。text-alignは、ブロック要素の中に入っているインライン要素の行揃えを指定するプロパティなので、親要素の方に指定します。インライン要素に指定しても、要素の横幅=中身の横幅なので動けるスペースがなく、反映されません。

記述例

クラス名sample01のp要素内のテキストを中央揃えにしたいときの記述例です。

.sample01{ text-align: center; }

ブロック要素を左右中央に揃える

ブロック要素を左右中央に揃えるには、左右の margin を auto に指定します。 このとき必ずwidthも一緒に指定します。左右の margin を auto に指定した場合、余白を左右均等に分けてくれるのですが、widthの指定が無いとブロック要素の横幅は親要素いっぱいに広がってしまい、余白ができないため中央寄せになりません

記述例

クラス名sample02のp要素を中央揃えにしたいときの記述例です。

.sample02{
  width: 100px; /* widthの指定は必須。単位は%などでもOK */
  margin: 0 auto; /* 上下のmarginは0でなくてもOK */
}

DEMO

記述例のデモファイルです。

DEMO

参考サイト:【CSS】要素を上下左右に中央寄せする色々な方法 – アイデアハッカー

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>