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]