CSS: Como alinhar texto na vertical

Neste artigo veremos a forma mais fácil de alinhar texto na vertical em seu projeto HTML, utilizando apenas CSS de forma rápida..

Fala programador(a), tudo bem? Bora aprender coisa nova

Alinhar textos na horizontal é bem tranquilo, apenas precisamos adicionar a regra text-align com center

Mas e na vertical? A regra do text-align não funciona da mesma forma

Então vamos a um exemplo para ver na prática como fazer este alinhamento:

<!DOCTYPE html>
<html>
<head>
    <title>Como centralizar o texto na vertical</title>
</head>
<body>
    <div id="container">
        <p id="texto">Texto para centralizar</p>
    </div>
</body>
</html>

Aqui temos nossa div com id de container, que contém o texto a ser centralizado

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E o texto está num tag p, que é muito comum esta prática

Agora vamos ao CSS para centralizar na vertical:

body {
    margin: 30px;
}

#container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}

#texto {
    position: relative;
    text-align: center;
    line-height: 500px;
}

Com este código conseguimos alinhar o texto no centro, veja o resultado:

Vamos a explicação do código, primeiramente demos uma margin no body, apenas para descolar as extremidades da div do navegador, não é necessário

Depois dimensionamos o container, o que provavelmente deve acontecer no seu caso também, ele ter uma altura e largura

Aí a mágica esta no #texto, inserimos posição relativa, para acompanhar o pai e uma altura de linha (line-height) igual a altura do pai, isso faz ele ficar centralizado

E também o text-align com center, como dito antes para alinhar  na horizontal

Conclusão

Vimos como alinhar um texto na vertical neste artigo, apenas precisamos dimensionar o container pai

Determinar uma altura, para que no elemento filho (o texto), nós inserirmos uma line-height igual a altura dimensionada do pai

Assim teremos o texto centralizado na vertical 😀

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube