• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >Other>CSS / jQuery / javascript> DIV要素のセンタリング(中央配置)

【Other】【CSS / jQuery / javascript】DIV要素のセンタリング(中央配置)

  • 2012/03/04 09:58
  • css
  • 71

<div>要素をセンターに配置する場合の記述方法についてです。

divブロック要素です。
spanaなどのインライン要素は、中央寄せをする際にtext-alignを利用します。
しかし、divなどのブロック要素にtext-alignを設定しても、指定したブロックに内包されたインライン要素は中央寄せで表示されますが、div自体を画面中央に配置することはできません

div自体をセンタリングしたい場合は、marginの設定を変更するか、alignを使用します。

marginの設定

<div>の左右のmarginをautoにする。

記述例
(1)外部cssを使用する場合

・css

div.center{margin : 0 auto;}

・html

<div class="center">内容</center>
(2)htmlのみの場合
<div style="margin:0 auto;">内容</div>

alignの設定

<div>の属性としてalignを設定する。

html記述例:
<div align="center">内容</div>

alignの種類は下記の通りです。

  • left…左寄せ
  • right…右寄せ
  • center…中央寄せ

まとめ

tableタグでレイアウトをしていた自分がdivというタグに出会って様々なレイアウトができるようになりました。
左右のマージンをautoにするテクニックはレスポンシブデザインでコーディングを行う際などによく利用するので、覚えておきたい基本tipsです。

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ