Como centralizar texto HTML com CSS
A tag <center>, usada para centralizar textos em HTML, foi descontinuada no HTML5. Desde então, para centralizar textos em HTML, utiliza-se o CSS. Com o parâmetro text-align, você define o layout do documento dentro da tag style, o que deixa o código mais organizado e evita erros.
Centralizar texto em HTML: Como fazer?
Para a centralização de textos em HTML, ou seja, para colocar textos no centro de um documento HTML, utiliza-se hoje o comando CSS text-align. Com essa instrução, o texto em questão é formatado horizontalmente. Durante muito tempo, utilizava-se a tag HTML <center>, que está agora desatualizada — o método não é mais suportado desde o HTML5.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
Centralizar em HTML com text-align em CSS
Desde o HTML5, a instrução para centralizar um texto em HTML é definida dentro da tag style HTML. Vamos ilustrar esse processo com um exemplo simples. No código abaixo, centralizamos a headline, o texto e um HTML-div dentro do nosso documento HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Este é o seu título</h1>
<p>Este é o conteúdo da sua página.</p>
<div>Este é um div.</div>
</body>
</html>Com isso, o layout do documento já é definido com antecedência, garantindo um código mais organizado e evitando erros.
- SSL Wildcard grátis para mais segurança
- Registro privado grátis para mais privacidade
- Domain Connect grátis para configurar DNS fácil
Tag HTML <center>: Descontinuada
Nas versões mais antigas da linguagem de programação web, utilizava-se a tag HTML <center>, que mostramos aqui apenas para fins de completude. Como ela está desatualizada e não é mais suportada, você deve obrigatoriamente usar a solução em CSS. A sintaxe do <center> para centralizar textos era a seguinte:
<center><p>Text</p></center>No exemplo abaixo, você pode ver na prática como a tag HTML <center> era utilizada. Ao contrário da solução moderna, era necessário alterar o código diretamente no < body> para centralizar o texto. Dependendo da extensão e estrutura, isso resultava em um código desorganizado e muito mais propenso a apresentar erros:
<!DOCTYPE html>
<html>
<body>
<p>Texto que não foi centralizado.</p>
<center><p>Texto que foi centralizado.</p></center>
</body>
</html>O resultado se parece com o seguinte:
