CSS HTML

CSS: Como alinhar texto na vertical

21 de maio de 2020

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..

alinhando texto na vertical capa

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:

texto alinhado na vertical ex1Vamos 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

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x