Antes de tudo, observe que isso vertical-align
é aplicável apenas às células da tabela e aos elementos no nível de linha.
Existem duas maneiras de obter alinhamentos verticais que podem ou não atender às suas necessidades. No entanto, mostrarei dois métodos dos meus favoritos:
1. Usando transform
etop
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
O ponto principal é que um valor percentual em top
é relativo ao do height
bloco que o contém; Enquanto um valor percentual em transform
s é relativo ao tamanho da própria caixa (a caixa delimitadora).
Se você tiver problemas de renderização de fonte (fonte embaçada), a correção será adicionada perspective(1px)
à transform
declaração para que ela se torne:
transform: perspective(1px) translateY(-50%);
Vale notar que o CSS transform
é suportado no IE9 + .
2. Usando inline-block
elementos (pseudo-)
Neste método, temos dois inline-block
elementos irmãos que são alinhados verticalmente no meio por vertical-align: middle
declaração.
Um deles tem um height
dos 100%
seus pais e o outro é o elemento desejado, que queremos alinhá-lo no meio.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Por fim, devemos usar um dos métodos disponíveis para remover a lacuna entre os elementos em nível de linha .
position: absolute
qualquer lugar?