WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Alinhar um texto verticalmente com CSS

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

Veja o html utilizado nos exemplos acima

<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
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]