files/pt-br/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
62
63
64
65
66
67

---
title: '<center>: O elemento de texto centralizado (obsoleto)'
slug: Web/HTML/Element/center
tags:
  - Alinhamento de Texto
  - Elemento
  - HTML
  - Obsoleto
  - Referencia
  - Texto
  - Web
  - alinhamento
  - center
translation_of: Web/HTML/Element/center
---
<div>{{obsolete_header()}}</div>

<p><span class="seoSummary">O elemento <strong>Center do HTML</strong> (<strong><code>&lt;center&gt;</code></strong>) se tornou obsoleto, é um <a href="/pt-BR/docs/Web/HTML/Elementos_block-level" title="HTML/Block-level_elements">elemento de nível de bloco</a> que exibe o conteúdo em nível de bloco ou em linha centralizado horizontalmente dentro do elemento que o contém.</span> O contêiner {{HTMLElement ("body")}} geralmente está presente, mas não é necessário. Essa tag foi descontinuada no HTML 4 (e XHTML 1) em favor da propriedade CSS {{Cssxref ("text-align")}}, que pode ser aplicada ao elemento {{HTMLElement ("div")}} ou à um paragráfo indivídual {{HTMLElement ("p")}}. Para blocos de centralização, use outras propriedades CSS como {{Cssxref ("margin-left")}} e {{Cssxref ("margin-right")}} e defina-as como <code>auto</code> (ou defina {{Cssxref ("margin") }} para <code>0 auto</code>).</p>

<h2 id="Interface_DOM">Interface DOM</h2>

<p>Este elemento implementa a interface {{domxref("HTMLElement")}}.</p>

<div class="note">
<p><strong>Nota de implementação:</strong> até o Gecko 1.9.2 inclusive, o Firefox implementa a interface {{domxref("HTMLSpanElement")}} para este elemento.</p>
</div>

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

<pre class="brush: html notranslate">&lt;center&gt;Esse texto vai ficar centralizado.
&lt;p&gt;Este parágrafo também.&lt;/p&gt;&lt;/center&gt;
</pre>

<p>O efeito da centralização vai acontecer até onde o elemento <code>center</code> for fechado.</p>

<h2 id="Example_2" name="Example_2">Exemplo 2 (Alternativa CSS)</h2>

<pre class="brush: html notranslate">&lt;div style="text-align:center"&gt;Esse texto vai ficar centralizado.
&lt;p&gt;Este parágrafo também.&lt;/p&gt;&lt;/div&gt;
</pre>

<p>Isso acontece por os textos que sofreram as alterações estão dentro dos elementos que foi aplicado a propriedade.</p>

<h2 id="Example_3" name="Example_3">Exemplo 3 (Alternativa CSS)</h2>

<pre class="brush: html notranslate">&lt;p style="text-align:center"&gt;Essa linha vai ficar centralizada.&lt;br&gt;
E esta linha também.&lt;/p&gt;
</pre>

<h2 id="Notes" name="Notes">Nota</h2>

<p>Aplicar {{Cssxref("text-align")}}<code>:center</code> a um elemento {{HTMLElement("div")}} ou {{HTMLElement("p")}} centraliza o <em>conteúdo</em> desses elementos, deixando suas dimensões gerais inalteradas.</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

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

<p>Apesar de obsoleto, o elemento é aceito em todos os navegadores do mercado.</p>

<h2 id="Veja_também">Veja também</h2>

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

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