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.
🚨DICA: Crie um projeto de programação web com HTML5, CSS3 e JavaScript do zero em 3 aulas: MiniCurso Gratuito! 🚀
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”