center要素 -- 中央寄せ (非推奨)

基本データ

center要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict × 利用できません
Transitional △ インライン要素 ブロックレベル要素 必須 必須 ブロックレベル要素
Frameset △

属性

解説

内容を中央寄せにする要素です。この要素は非推奨です。代わりにスタイルシートを使ってください。

テキストの中央寄せ

CSSでテキストを中央寄せにするには、親要素にtext-align: centerを設定します。

h2, p {
  text-align: center;
}

center要素の歴史

Netscapeが独自に採用した要素でしたが、HTML 3.2で正式に採用されました。しかし、center要素は見た目を表す要素であるため、HTML 4で非推奨要素になりました。

ブロックレベル要素の中央寄せ

ブロックレベル要素を中央寄せするには、対象となる要素にmargin-left:auto; margin-right:autoを設定します。

A1B1
A2B2

Internet Explorer 5.5以前のブラウザはこの方法に対応していません。しかし、以前のInternet Explorerには「text-align: centerを設定すると、中身のブロックレベル要素まで中央寄せしてしまう」というバグがあります。これを利用してブロックレベル要素を中央寄せすることができます。

  1. まず、対象となるブロックレベル要素を<div class="container">〜</div>で囲みます。 
    <div class="container">
  <対象要素>(内容)</対象要素>
</div>
  2. div.container { text-align: center; }を設定すると、IEのバグで中身のブロックレベル要素が中央寄せされます。
  3. 中身のテキストは中央寄せにしたくないので、div.container 対象要素 { text-align: left; }とします。
  4. 正しいブラウザならdiv.container 対象要素 { margin-left: auto; margin-right: auto; }で中央寄せになります。

まとめて書くと次のようになります。

div.container {
  text-align: center;
}
div.container 対象要素 {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
A1B1
A2B2

Transitional DTDの定義

<!ELEMENT CENTER - - (%flow;)*         -- shorthand for DIV align=center -->
<!ATTLIST CENTER
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Information

現在の位置