Como Centralizar Texto no HTML

Coescrito por Equipe wikiHow

Baixe em PDF

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] X Fonte 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] X Fonte 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>
```
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] X Fonte 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>
```
Publicidade

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>
```
4
Faça uma revisão do seu código. Ele deverá ficar mais ou menos parecido com este:^{[4] X Fonte 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>
```
Publicidade