Como Centralizar Texto no HTML

Com este artigo você aprenderá a centralizar textos em uma página HTML usando CSS (Cascading Style Sheets). Antigamente, era comum o uso da tag <center> para centralizar textos; no entanto, ela se tornou obsoleta e já não é mais interpretada pela maioria dos navegadores.^{[1]XFonte de pesquisa}

Método 1

Método 1 de 2:

Usando CSS

Baixe em PDF

1
Abra o arquivo que contém o código CSS da sua página. Mesmo que a tag <center> esteja ultrapassada, ainda é possível centralizar textos usando outros elementos, que podem ser posicionados em qualquer área da página. Se você não tiver encontrado um arquivo CSS separado, é possível que o código esteja no próprio HTML, entre as tags “<style>” e “</style>”.^{[2]XFonte de pesquisa}
- Não havendo um arquivo CSS separado nem códigos embarcados no HTML de sua página, crie as tags <style> e </style> logo abaixo da tag <body>, no início do arquivo, desta forma:
2
Crie uma classe para centralizar textos. A tag <div> servirá para delimitar o texto que você deseja centralizar e uma classe será criada e aplicada especificamente a ela. O código dessa classe deverá ser digitado entre as tags “style”. Por motivos estéticos, não se esqueça de pressionar ↵ Enter duas vezes antes da primeira linha.
```
div.a {}
```
3
Inclua o atributo text-align. Digite text-align: center; entre as duas chaves na seção div.a do CSS. A essa altura, o código da página deve estar assim:
```
<!DOCTYPE html><html><body><style>div.a {text-align: center;}</style>
```
4
Centralize o texto. Para isso, crie a linha <div class="a"> acima do texto que deseja centralizar e a linha </div> logo abaixo do texto. Por exemplo, para centralizar um título seguido de um parágrafo, empregue o código:
```
<div class="a"><h1>Seja bem-vindo ao meu site</h1><p>Aqui você aprenderá vários assuntos interessantes.</p></div>
```
5
Use a tag div.a para centralizar outros textos na mesma página. Para centralizar outros textos – que estejam entre as tags <a></a> e <h2></h2>, por exemplo – digite <div class="a"> antes e </div> depois do trecho de código desejado. Como o “div.a” já está declarado no código de estilos da página, ele pode ser chamado quantas vezes você quiser e funcionará da mesma maneira:
```
<style>div.a {text-align: center;}</style><div class="a"><h2>Ajude fazendo uma doação</h2><a>Clique aqui!</a></div>
```

How.com.vn Português: Step 6 Faça uma revisão no código.

Embora o conteúdo possa variar um pouco, o código deve seguir o mesmo padrão:^{[3]XFonte de pesquisa}

<!DOCTYPE html><html><body><style>div.a {text-align: center;}</style><div class="a"><h1>Seja bem-vindo ao meu site</h1><p>Aqui você aprenderá vários assuntos interessantes.</p></div><div class="a"><h2>Ajude fazendo uma doação</h2><a>Clique aqui!</a></div></body></html>

Método 2

Método 2 de 2:

Usando a tag Center e HTML

Baixe em PDF

1
Abra o documento HTML. Embora obsoleta, você aprenderá a utilizar a tag HTML <center> neste Método. Observe que até o momento (dezembro de 2018) ela tem funcionado em alguns navegadores, contudo não é prudente encará-la como uma solução a longo prazo.
Dê uma olhada no código HTML e procure por títulos, parágrafos e textos em geral que queira centralizar.
3
Coloque a tag “center” antes e depois do texto que precisa ser centralizado. O código ficará no formato: <center>Texto a ser centralizado</center>. No caso do texto já estiver envolto em outras tags (“<p></p>”, por exemplo), simplesmente adicione as tags "center" por fora:
```
<center><h1>Seja bem-vindo ao meu site</h1></center><center>Sinta-se em casa!</center>
```

How.com.vn Português: Step 4 Faça uma revisão do seu código.

Ele deverá ficar mais ou menos parecido com este:^{[4]XFonte de pesquisa}

<!DOCTYPE html><html><body><h1><center>Seja bem-vindo ao meu site</center></h1><center>Sinta-se em casa!</center><p1>Aqui você aprenderá vários assuntos interessantes.</p1></body></html>