ボックスの中央配置、右寄せ、左寄せの方法

div要素のようなブロックレベル要素のセンタリング（中央配置）には「text-align」は使えない。「text-align」プロパティはインライン要素の位置揃えを指定するためのものである。

ボックスのセンタリングはセンタリングしたい要素にcssで「margin: 0　auto;」とすれば中央に配置される。次の例では「ブロックレベル要素をセンタリングする」はsampleブロックの中央に配置される。

<HTML>

<div class="sample">
  <div>
    <h2>ブロックレベル要素をセンタリングする</h2>
  </div>
</div>

<CSS>

.sample {  
    width: 500px;  
    border: 1px solid #000;  
}
.sample div   {
    width: 200px;  
    border: 1px solid #FF0000;  
    margin: 0 auto;  
}

一方、左右に寄せる場合には次のようにする。

HTML

<div class="box"> 
  <h2>ブロックの中身</h2> 
</div>

右寄せの場合

div.box {
    float:right;
}

左寄せの場合

div.box {
    float:left;
}

floatを使わない場合はCSSで次のようにする。

  • 左寄せは、ブロック要素にwidth(幅)を指定してmargin-right: auto;
  • 右寄せは、ブロック要素にwidth(幅)を指定してmargin-left: auto;
左寄せ
.box {
    width:100px;
    margin-right:auto;
}

右寄せ
.box {
    width:100px;
    margin-left:auto;
}