Text Align: como centralizar texto com CSS

Muitas vezes você precisa centralizar algum texto usando HTML e CSS. Mas qual é a melhor maneira? Neste artigo, mostrarei como usar a propriedade text align em CSS e como alinhar texto verticalmente usando CSS Flexbox. Também discutirei a tag <center> e por que ela não deve ser usada para centralizar o texto.

Como usar a propriedade text align em CSS

Quando você usa tags de cabeçalho ou parágrafo, os estilos padrão em HTML colocam o texto no lado esquerdo da página.

Neste exemplo, temos um <h1> colocado no canto superior esquerdo da página.

<h1 class="title">Vamos aprender sobre como centralizar o texto</h1>

Se quisermos centralizar o texto horizontalmente na página, podemos usar a propriedade text align.

.title {
  text-align: center;
}

Se você deseja centralizar horizontalmente todo o texto na página, pode usar a propriedade text align no seletor de corpo.

Neste próximo exemplo, temos mais texto em nosso HTML.

<h1>Programadores Deprê</h1>
<section>
  <h2>Eu amo aprender sobre HTML</h2>
  <p>Aqui está o meu primeiro parágrafo</p>
</section>

<section>
  <h2>Eu amo aprender sobre CSS</h2>
  <p>Aqui está o meu segundo parágrafo</p>
</section>

Sem qualquer estilo, atualmente se parece com isso na página.

Em nosso CSS, podemos direcionar o seletor body e usar a propriedade text align.

body {
  text-align: center;
}

Atenção! Descubra os melhores cursos de programação neste guia especial: Cursos de Programação.

Como centralizar o texto horizontalmente e verticalmente

A propriedade text-align é usada para centralizar horizontalmente o texto na página. Mas também podemos usar CSS Flexbox para centralizar verticalmente o texto.

Neste exemplo, temos algum texto em nosso HTML:

<h2 class="title">Vamos aprender como centralizar o texto verticalmente e horizontalmente</h2>

<div class="flex-container">
  <p>Flexbox é legal!!!</p>
</div>

Isto é o que parece atualmente sem qualquer estilo.

Podemos centralizar o <h2>uso da propriedade text align.

.title {
  text-align: center;
}

Podemos então centralizar horizontalmente e verticalmente o parágrafo dentro da div flex-container usando o Flexbox.

.flex-container {
    display: flex;
  
    /*isso centraliza o texto horizontalmente*/
    justify-content: center;
  
    /*isso centraliza o texto verticalmente*/
    align-items: center;
  
    height: 200px;
    color: #fff;
    font-size: 1.2rem;
    background: #00008b;
  }

Leia também: 6 causas de estresse no trabalho remoto e como evitá-las

Você deve usar a tag center?

Nas versões mais antigas do HTML, a tag <center> era usada como forma de centralizar o texto horizontalmente na página.

Muitos novos desenvolvedores ainda usarão essa tag porque ela exibe os resultados corretos. No entanto, a <center>tag foi preterida no HTML 4 porque a prática recomendada é usar a propriedade CSS text align .

É importante lembrar que HTML é para conteúdo enquanto CSS é para estilo. É uma prática recomendada separar essas duas preocupações e não usar HTML para fins de estilo.

Espero que você tenha gostado deste artigo sobre como centralizar texto usando HTML e CSS.

Conteúdo em vídeo para praticar HTML e CSS:

Treine seu HTML e CSS criando uma lading page completa.

“o melhor professor é a prática”