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 className="product1">
<div className="product2">
<div className="product3">
<img src="imagem.jpg"/>
</div>
</div>
</div>