Como funciona a propriedade de CSS Vertical Align
CSS - Veja como funciona a propriedade de CSS Vertical AlignO 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:
Com o comando Vertical Align, podemos posicionar o texto aonde precisarmos, como se realmente fosse uma tabela.
<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.
<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>
Arte e Desenvolvimento
