CSS

Como centralizar texto com CSS

9 de março de 2020

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.

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

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 😀

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x