Alinhar um texto verticalmente com CSS
CSS - Alinhar um texto verticalmente com CSS de forma simples
Publicidade
Hoje vamos ver uma maneiras bem simples de alinhar um texto verticalmente dentro de um determinado bloco.
Essa técnica é muito útil para textos que precisam ficar dentro de um bloco colorido ou dentro de uma bloco especifico, e precisa de um determinado espaçamento como menus, títulos e legendas.
Vamos aos exemplos
Esse método é muito útil para alinharmos texto com 1 linha
Aumentado a altura do bloco o texto continua centralizado
Nos exemplos acima não utilizamos o comando “padding” para centralizar os textos verticalmente, utilizamos um comando chamado “line-height”.
<style type="text/css">
.titulo1 {
width: 100%;
background-color: #360;
line-height: 50px;
font-size: 18px;
color: #FFF;
float: left;
text-align: center
}
.titulo2 {
width: 90%;
background-color: #036;
line-height: 80px;
font-size: 18px;
color: #FFF;
float: left;
margin: 25px 0;
text-align: center
}
.menu1 {
width: 20%;
background-color: #8c0000;
line-height: 40px;
font-size: 18px;
color: #FFF;
float: left;
margin: 0 2px;
text-align: center
}
</style>
<div class="titulo1">Esse método é muito útil para alinharmos texto com 1 linha </div>
<div class="titulo2">Aumentado a altura do bloco o texto continua centralizado</div>
<div class="menu1">Menu 1</div>
<div class="menu1">Menu 2</div>
<div class="menu1">Menu 3</div>
<div class="menu1">Menu 4</div>
Esse comando permite você mudar a altura da linha do texto, você só precisa colocar a altura final do bloco, ou seja não precisamos ficar calculando o padding para chegar a altura desejada, sem contar que o seu código css acaba ficando com menos informações.
Esse bloco foi configurado com line-height
Esse bloco foi configurado com padding
.titulo1b {
width: 100%;
background-color: #360;
font-size: 18px;
color: #FFF;
float: left;
text-align: center;
line-height: 50px;
}
.titulo2b {
width: 100%;
background-color: #600;
font-size: 18px;
color: #FFF;
float: left;
text-align: center;
padding: 16px 0 17px 0
}
Esse método é muito prático e funciona em todos os navegadores, você acaba evitando os calculos de padding que no final acaba economizando tempo e calculadora, porém esse método só é interessante quando o texto só deve ter uma linha, pois como estamos estabelecendo valores da altura da linha, essa regra vale para todas as linhas do bloco.
Quando você usa 2 ou mais linhas o line-height interpreta o valor para todas as linhas então acaba não alinhando mas sim separando seu texto.
Publicidade
Autor: Danilo Luna
Arte e Desenvolvimento
Gostou dessa dica?
2 Voto(s)
Arte e Desenvolvimento
