HTML 要素を中央寄せ／右寄せで表示する

2013-05-01

水平方向の中央寄せ

幅 (width) の指定されたブロック要素に対して、margin-left、margin-right をともに auto に設定**すると、中央寄せで表示することができます。

あいうえお

CSS

div.center {
  display: block;  /* div 要素はもともとブロック要素なので省略可 */
  margin-left: auto;
  margin-right: auto;
  width: 100px
  height: 50px;
  background: blue;
  color: white;
}

HTML

<div class="center">あいうえお</div>

img 要素などのインライン要素は、display: block でブロック要素として扱うことで、同様の方法で中央寄せできます。

HTML

<img style="display: block; margin: auto;" src="sample.png">

右寄せ

ブロック要素を右寄せで表示するには、margin-left にだけ auto を指定します。

あいうえお

.right {
  display: block;
  margin-left: auto;
  /* ...省略... */
}

縦方向の中央寄せ

ある要素の display と vertical-align を下記のように設定しておくと、その子要素が縦方向に中央寄せされます。外側のブロック要素の高さを height プロパティで指定する必要があることに注意してください。

上下の中央寄せ

CSS

div.center {
  display: table-cell;     /* これと */
  vertical-align: middle;  /* これで子要素が中央寄せされる */
  height: 100px;
}

div.center_item {
  text-align: center;
  background: pink;
}

HTML

<div class="center">
  <div class="center_item">上下の中央寄せ</div>
</div>

2013-05-01