files/zh-cn/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

---
title: <center>
slug: Web/HTML/Element/center
translation_of: Web/HTML/Element/center
---
<div>{{deprecated_header()}}</div>

<h2 id="Summary">Summary</h2>

<p>HTML Center 元素 (<code>&lt;center&gt;</code>) 是个 <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">块级元素</a>，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中 (通常是 {{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_接口">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>

<h2 id="Example_3" name="Example_3">示例 3 (CSS 替代)</h2>

<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>向 {{HTMLElement("div")}} 或者 {{HTMLElement("p")}} 元素应用 {{Cssxref("text-align")}}<code>:center</code> <font face="consolas, Liberation Mono, courier, monospace">会使这些元素的</font><em>内容</em>居中，同时保留其整体大小不变。</p>

<h2 id="另见">另见</h2>

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

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