Como centralizar texto com CSS

Publicado em 09/03/2020

Neste artigo vamos aprender como centralizar texto com CSS, para posicionar o texto no centro dos elementos que precisarmos no HTML.

centralizar texto com css capa

Fala programador, beleza? Bora aprender coisa nova?

Esse problema é bem simples de resolver, vamos utilizar uma regra do CSS chamada text-align

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Com esta regra e o valor center, podemos centralizar textos nas nossas páginas web

Vamos ver na prática com um exemplo real

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Como centralizar texto com CSS: prática

Este será o código que vamos utilizar no exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como centralizar texto com CSS</title>
</head>
<body>
    <div>
        <p>Texto para centralizar</p>
    </div>
</body>
</html>

Vamos ver como fica no navegador:

como centralizar texto com css ex 1

Agora vamos adicionar o CSS necessário para centralizar o texto na tela, veja:

p {
    text-align: center;
}

Exatamente, apenas isso de CSS e já realizamos a mágica, legal né? 😀

E veja como fica no navegador:

como centralizar texto com css ex 2

Bom, agora que resolvemos o problema, saiba que também podemos alinhar de outras formas com o text-align

left: alinha para esquerda;
right: alinha para a direita;
justify: alinha de forma justificada;

Então agora você aprendeu mais uma propriedade de CSS e seus valores!

Conclusão

Vimos que podemos alinhar texto com a regra text-align do CSS

Além disso ela não serve para alinhar somente no centro, podemos utilizar outros valores para alinhar o texto de forma diferente no HTML

E por hoje é isso, até o próximo post! 🙂

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn