Como alinhar o texto verticalmente com CSS?

Alinhar elementos verticalmente é uma tarefa comum no CSS, mas que pode gerar algumas dúvidas.

Neste tutorial, vamos ver as melhores maneiras de alinhar texto verticalmente com CSS, com exemplos práticos.

Sintaxe para alinhar texto verticalmente em CSS

Em CSS existem alguns valores e propriedades que permitem o alinhamento vertical de elementos. Os principais são:

• vertical-align: alinha elementos inline (como texto) verticalmente em relação à linha de base, topo, meio ou base do elemento;
• align-items: alinha elementos filhos verticalmente dentro de um container flex;
• justify-content: alinha elementos filhos verticalmente dentro de um container flex ou grid;
• margin: pode ser usado para alinhar elementos block verticalmente por meio da centralização;
• position + top/bottom: posiciona elementos absolutos ou relativos verticalmente.

Como alinhar o texto verticalmente em CSS?

Agora que conhecemos as sintaxes, veja exemplos práticos de como usar cada uma dessas técnicas.

No elemento pai

Uma das maneiras mais comuns de alinhar texto verticalmente é ao configurar o alinhamento ao elemento pai.

Exemplo

HTML:

<div class="container"> <p>Meu texto alinhado verticalmente no meio.</p> </div>

CSS:

.container {
height: 200px;
display: flex; 
align-items: center;
}

Nesse exemplo, definimos um container com altura fixa e usamos as propriedades display: flex e align-items: center. Isso fará com que o texto fique centralizado verticalmente no meio do container.

No próprio elemento

Também é possível alinhar o texto verticalmente ao definir propriedades no próprio elemento de texto.

Exemplo

HTML:

<p class="texto-centralizado">Texto alinhado verticalmente no meio.</p>

CSS:

.texto-centralizado {
height: 200px;
line-height: 200px;
}

Nesse exemplo, definimos um container com altura fixa e usamos as propriedades display: flex e align-items: center. Isso fará com que o texto fique centralizado verticalmente no meio do container.

Aqui, definimos uma altura fixa para o elemento <p> e um line-height com o mesmo valor. Isso fará com que o texto fique centralizado verticalmente em relação à altura do elemento.

Como centralizar na vertical e na horizontal?

Para centralizar um elemento tanto na vertical quanto na horizontal, podemos combinar algumas das técnicas acima.

Display flex

Com flex, podemos centralizar facilmente ao definir o alinhamento vertical com align-items e o alinhamento horizontal com justify-content.

Exemplo

HTML:

<div class="container">
<p>Texto centralizado vertical e horizontalmente.</p>
</div>

CSS:

.container {
height: 200px;
display: flex;
align-items: center;
justify-content: center; 
}

Display Grid

Com grid também fica fácil centralizar com as mesmas propriedades do flex.

Exemplo

HTML:

<div class="container">
<p>Texto centralizado com grid.</p>
</div>

CSS:

.container {
height: 200px;
display: grid;
align-items: center;
justify-content: center;
}

Position Absolute

Outra opção é usar posicionamento absoluto junto com transform.

Exemplo

HTML:

<div class="container">
<p>Texto com posicionamento absoluto.</p>
</div>

CSS:

.container {
height: 200px;
position: relative;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Aqui, posicionamos o texto com top: 50% e left: 50% e depois usamos um transform negativo de metade do tamanho para centralizar perfeitamente.

Por que usar o texto verticalmente no CSS?

É compatível com quais navegadores?

As propriedades modernas de alinhamento vertical, como flex e grid, são compatíveis com a maioria dos navegadores atuais:

• display: flex: Chrome, Firefox, Safari, Edge, IE 11;
• display: grid: Chrome, Firefox, Safari, Edge, Opera (não suportado no IE);
• align-items e justify-content: Chrome, Firefox, Safari, Edge, IE 11 (com flex).

Já as propriedades mais antigas, como vertical-align e line-height, têm suporte em todos os navegadores.

Técnicas que envolvem posicionamento absoluto e transformações também funcionam bem nos navegadores modernos.

Esperamos que este guia tenha te ajudado a entender como alinhar texto verticalmente com CSS!

Para aprender mais sobre desenvolvimento web, confira também nosso conteúdo sobre como criar um site.

Conheça também nossos planos de hospedagem de sites com diversos recursos ilimitados!