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

Como funciona a propriedade de CSS Vertical Align

Publicidade

O Comando Vertical Align, funciona de maneira muito semelhante com o valign das tabelas em html, tendo assim a função de centralizar textos e imagens.

Porém diferente dos comandos da tabela o vertical align não funciona sozinho, ou seja, ele precisa de alguns pré-requisitos para funcionar.

Primeiro vamos literalmente simular uma tabela atravéz de alguns elementos (podem ser div, span, li).

Precisamos que o bloco principal funcione como a tag <table>, para isso usaremos o comando "display:table;"

Nos demais elementos que vão ficar dentro do bloco principal, iremos simular as tags <td>, então usaremos o comando "display:table-cell" (Não é necessário nenhum elemento para simular as tags <tr>).

Veja como fica:

texto-1
texto-2
texto-3

Com o comando Vertical Align, podemos posicionar o texto aonde precisarmos, como se realmente fosse uma tabela. 

Veja o html utilizado nos exemplos acima

<style type="text/css">.principal{     width: 300px;     text-align:center;    display: table;}.coluna-1{      width: 33.3%;     display: table-cell;     border:1px solid #000;     vertical-align:bottom;     height:75px;}.coluna-2{      width: 33.3%;     display: table-cell;       border:1px solid #000;     vertical-align:middle;     height:75px;}.coluna-3{      width: 33.3%;     display: table-cell;       border:1px solid #000;     height:75px;     vertical-align:super;}</style><div class="principal">     <div class="coluna-1">texto-1</div>     <div class="coluna-2">texto-2</div>     <div class="coluna-3">texto-3</div></div>

No exemplo acima ulitizamos uma altura fixa para podermos posicionar o texto, como estamos simulando uma tabela, podemos fazer a posição do texto acompanhar automaticamente a a altura do bloco principal automaticamente.

texto-1
texto-2
Aqui eu vou usar um texto que ocupa varias linhas dos nossos blocos, deixando ele mais alto, mas não importa o quanto texto eu tenha os blocos ao lado vão respeitar o alinhamento estipulado, como se fosse uma tabela
<style type="text/css">.principal{     width: 500px;     text-align:center;    display: table;}.coluna-1{      width: 33.3%;     display: table-cell;     border:1px solid #000;     vertical-align:bottom;    }.coluna-2{      width: 33.3%;     display: table-cell;       border:1px solid #000;     vertical-align:middle;    }.coluna-3{      width: 33.3%;     display: table-cell;       border:1px solid #000;   }</style><div class="principal">     <div class="coluna-1">texto-1</div>     <div class="coluna-2">texto-2</div>     <div class="coluna-3">Aqui eu vou usar um texto que ocupa varias linhas dos nossos blocos, deixando ele mais alto, mas não importa o quanto texto eu tenha os blocos ao lado vão respeitar o alinhamento estipulado, como se fosse uma tabela  </div></div>

Veja o código do exemplo acima:

Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]