CSS para alinhamento vertical

O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura.

Pensamos em uma POG de usar imagemagick no ruby para dar um resize na imagem e fixar a altura no tamanho da div. Mas não foi preciso nada disso. Via CSS:

.product1 {display: table; height: 120px; width:120px; #position: relative; overflow: hidden; background-color:#fff;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}

  

<div class="product1">
    <div class="product2">
        <div class="product3">
            <img src="imagem.jpg"/>
        </div>
    </div>
</div>

Fonte

 

Leonardo

Registros de Leonardo Faria sobre desenvolvimento web