Neste artigo vamos aprender como centralizar texto com CSS, para posicionar o texto no centro dos elementos que precisarmos no HTML.
Fala programador, beleza? Bora aprender coisa nova?
Esse problema é bem simples de resolver, vamos utilizar uma regra do CSS chamada text-align
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:
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:
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
