Neste tutorial, vamos mostrar como centralizar um texto horizontalmente e verticalmente dentro de uma tag HTML <div> usando as propriedades do CSS Flexible Box Layout Model, ou simplesmente Flexbox. Este método elimina a necessidade de cálculos de padding, além de reduzir o número de informações e flexibilizar o seu layout.

Flexbox faz parte da especificação do CSS3 para organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos (responsividade).  O Flexbox organiza esses elementos sem a necessidade do float e também resolve problemas de Box Model que geralmente acontecem quando acrescentamos, padding, margin e border além da largura do elemento (fonte: Flexbox – Organizando seu layout - Artigos sobre HTML, JavaScript ...)

HTML

1. Primeiro criamos a <div> onde vai o nosso texto.

<div class="top">
	<h1>Eu sou um título da página</h1>
</div>

 Veja como ficam nossos elementos HTML sem estilos:


Eu sou um título da página


CLASSES CSS

2. Agora vamos criar a classe "top" que irá definir o estilo para a <div> onde está o nosso texto. Nesta fase ainda não vamos alinhar o texto verticalmente:

.top {
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

     Onde:

  • width - Define a largura da div em pixels;
  • height - Define a altura da div em pixels;
  • margin: auto - Centraliza a div "top" horizontalmente na página;
  • background-color - Define a cor do fundo da div;
  • font-family - Define a fonte do texto;
  • color - Define a cor do texto;

Observação: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags <style> </style> ou inseridas em uma arquivo ".css" externo.

 Veja abaixo como ficou o nosso exemplo sem a centralização vertical do texto:

Eu sou um título da página

CENTRALIZANDO O TEXTO HORIZONTALMENTE E VERTICALMENTE

3. Vamos agora mostrar como você pode centralizar o texto horizontalmente e verticalmente utilizando as maravilhas do Flexbox: Na classe CSS "top", acrescente as propriedades display: flex; para definir a div como um elemento flexível,  justify-content: center; para centralizar o texto horizontalmente e align-items: center; para centralizar o texto verticalmente.

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

DICA: O flexbox centraliza qualquer elemento HTML como textos, imagens, links, etc.

RESULTADO FINAL

Veja agora o nosso texto centralizado verticalmente:

See the Pen yvogaz by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento vertical do texto do exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="top">
	<h1>Eu sou um título da página</h1>
</div> 

 CSS

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

Compartilhe:

Área do Usuário

Doações

Por favor, ajude o nosso site a se manter online :)

 Obrigado!
Angelo Luis Ferreira
angelo.alf@gmail.com

Produzido por:

Topo