WebCis - Servios de criao sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um oramento

Dicas para Criao 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 mtodo 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 mtodo  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 ento acaba no alinhando mas sim separando seu texto.
Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notcias todas semanas

ltimos Clientes

[veja todos]