Neste tutorial, vamos mostrar como centralizar um texto verticalmente dentro de uma tag HTML <div> usando a propriedade CSS line-height. Este método elimina a necessidade de cálculos de padding, além de reduzir o número de informações no seu código CSS.
Atenção: Este método só é válido quando existe apenas uma linha na <div>.
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:50%;
height:90px;
text-align:center;
margin:auto;
background-color:#ff0000;
font-family:Arial;
color:#fff;
}
Onde:
- width - Define a largura da div (que é 50% da largura total da página onde ficará a div);
- height - Define a altura da div em pixels;
- text-align - Centraliza o texto horizontalmente;
- margin: auto - Centraliza a div 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 VERTICALMENTE
3. Vamos agora mostrar o pulo do gato para você centralizar o texto verticalmente da forma mais simples possível: Na classe CSS "top", acrescente a propriedade line-height com o mesmo tamanho da altura do elemento div onde está o texto. No nosso exemplo, a propriedade line-height deverá ter o mesmo valor de height, que é 90px. Veja como fica o nosso código CSS final:
.top {
width:50%;
height:90px;
line-height:90px;
text-align:center;
margin:auto;
background-color:#ff0000;
font-family:Arial;
color:#fff;
}
DICA: Para centralizar imagens verticalmente, utilize a propriedade vertical-align.
RESULTADO FINAL
Veja agora o nosso texto centralizado verticalmente:
See the Pen MvGxRO 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).
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 {
width:50%;
height:90px;
line-height:90px;
text-align:center;
margin:auto;
background-color:#ff0000;
font-family:Arial;
color:#fff;
}