<center> x - 中央ぞろえ (廃止)

■ 概要

項  目説  明
記述形式 <center>~</center>
種  類 ブロック要素インライン要素 (HTML4.01)

■ 解説

<center>~</center> の範囲を中央に配置して表示します。

HTML5 では見栄えに関する要素として廃止されました。 <div><p><table> などの要素に CSStext-alignmargin-leftmargin-right などのプロパティの指定を行うことで代替できます。 (以下の例を参照。)

■ CSSスタイルシートによる代替方法(1)

HTMLソース
HTML
<body> ~ </body>
<div style="text-align:center;">
 <span>中央配置されます</span>
</div>
<p style="text-align:center;">他の種類の要素<br>も同様です</p>

ブラウザー 表示例
中央配置されます

他の種類の要素
も同様です



■ CSSスタイルシートによる代替方法(2)

CSS で margin-leftmargin-right の2つのプロパティの値をともに "auto" に設定すると,<div><table> などのブロック要素を中央配置することができます。

HTMLソース
<style type="text/css">
<!--
  .c {
    text-align: center;
  }
  table.c,
  div.c,
  p.c {
    text-align: center;
    margin: 0px auto;
    background-color: #ffcccc;
  }
-->
</style>
<div class="c">中央配置されます</div>
<p class="c">&lt;p&gt;要素も<br>同様です</p>

ブラウザー 表示例
中央配置されます

<p>要素も
同様です


■ 備考

「代替方法(2)」で示した例では,marginプロパティを用いた指定:{margin: 0px auto;} を使用しています。 これと margin-leftmargin-right の2つのプロパティの値を用いた指定:{margin-left: auto; margin-right: auto;} では違いはあるのでしょうか?

実は,これはこの指定を行う前の要素の CSS プロパティの値により異なります。 つまり,この両者では,それ以前のこの要素に対する margin-topmargin-bottom の設定がどうなっているかによって異なります。  margin-topmargin-bottom の値がともに "0px" である場合には,両者に違いはありませんが,それ以外の場合は指定内容が変わってきます。

とくに,要素の上下の余白設定を保持したい場合には,{margin-left: auto; margin-right: auto;} と書く方が,{margin: 上下余白 auto;} などとするより,ミスにつながりにくいので無難です。