<center> - 中央揃え

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

概要

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

説明

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

見栄えの制御はスタイルシートで行うべきという方針により、HTML5 では廃止されました。代わりにスタイルシートの text-align を使用してください。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
通常の文章は左端から

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

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

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

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

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

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

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

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

<style type="text/css">
<!--
.center {
  text-align: center;
}
.center * {
  margin: 0 auto;
}
-->
</style>

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


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