<center> - 中央揃え

トップ > HTMLリファレンス > <center>

概要

形式
<center>~</center>
サポート
[非推奨] / H3-H4T / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
タグの省略
開始タグ:必須、終了タグ:必須
包含可能要素
ブロック要素 / インライン要素
属性
グローバル属性

説明

<center>~</center>に囲まれた部分を、画面の中央に表示します。

見栄えの制御はスタイルシートで行うべきという方針により、HTML5 では廃止されました。代わりにスタイルシートの text-align を使用してください。詳細は「センタリング(中央揃え・中央寄せ)」を参照してください。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

HTML
通常の文章は左端から

<center>この部分は中央に</center>

<div align="right">この部分は右端から</div>
表示
通常の文章は左端から
この部分は中央に
この部分は右端から

スタイルシートでのセンタリング

センタリングしたいものがインライン要素の場合は text-align を用います。

HTML
<div style="text-align:center;">
  <span>あああ</span>
</div>

センタリングしたいものがブロック要素の場合は、センタリングしたい要素自体に margin: 0 auto; を指定します。左右のマージンを自動配分することでセンタリングを実現します。Internet Explorer の場合は、text-align でもブロック要素がセンタリングされることがありますが、これは Internet Explorer のバグです。センタリングに関してはブラウザやモードによって差異があるので注意しましょう。

HTML
<div style="width:300px; margin:0 auto;">あああ</div>

<center> と同様に、子要素をすべてセンタリングしたい場合は、下記のようにするとよいようです。

HTML
<style>
.center {
  text-align: center;
}
.center * {
  margin-right: auto;
  margin-left: auto;
}
</style>

<div class="center">
  ...
</div>

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/center.htm