Como centralizar texto com CSS
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
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
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
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
