files/ja/web/html/element/center/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---
title: '<center>: 文字列の中央揃え要素 (廃止)'
slug: Web/HTML/Element/center
tags:
  - Deprecated
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/center
---
<div>{{obsolete_header()}}</div>

<p><span class="seoSummary">廃止済みの <strong>HTML の中央揃え要素</strong> (<strong><code>&lt;center&gt;</code></strong>) は、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示する<a href="/ja/docs/Web/HTML/Block-level_elements" title="HTML/Block-level_elements">ブロックレベル要素</a>です。</span>コンテナーはふつう {{HTMLElement("body")}} ですが、必ずしもそうとは限りません。</p>

<p>このタグは HTML 4 (及び XHTML 1) で非推奨要素に指定され、 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> の {{Cssxref("text-align")}} プロパティを {{HTMLElement("div")}} 要素に適用するか、それぞれの {{HTMLElement("p")}} 要素に適用する方式が採用されました。ブロックを中央揃えするには、別な CSS プロパティである {{Cssxref("margin-left")}} および {{Cssxref("margin-right")}} など用いて、値を <code>auto</code> に設定してください（または、 {{Cssxref("margin")}} を <code>0 auto</code> に設定してください）。</p>

<h2 id="DOM_Interface" name="DOM_Interface">DOM インタフェース</h2>

<p>この要素は {{domxref("HTMLElement")}} インタフェースを実装しています。</p>

<div class="note">
<p><strong>実装メモ: </strong>Gecko 1.9.2 以前 (Firefox) は、この要素に {{domxref("HTMLSpanElement")}} インタフェースを実装しています。</p>
</div>

<h2 id="Example_1" name="Example_1">例1</h2>

<pre class="brush: html">&lt;center&gt;This text will be centered.
&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/center&gt;
</pre>

<h2 id="Example_2" name="Example_2">例2 （CSSでの方法）</h2>

<pre class="brush: html">&lt;div style="text-align:center"&gt;This text will be centered.
&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/div&gt;
</pre>

<h3 id="Example_3" name="Example_3">例3 （CSSでの方法）</h3>

<pre class="brush: html">&lt;p style="text-align:center"&gt;This line will be centered.&lt;br&gt;
And so will this line.&lt;/p&gt;
</pre>

<h2 id="Notes" name="Notes">メモ</h2>

<p>{{Cssxref("text-align")}}<code>:center</code> を {{HTMLElement("div")}} または {{HTMLElement("p")}} 要素に適用すると、その<em>コンテンツ</em>を中央揃えにしますが、コンテンツの寸法はどれも変更されません。</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.center")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{Cssxref("text-align")}}</li>
 <li>{{Cssxref("display")}}</li>
</ul>

<div>{{HTMLRef}}</div>