CSS para alinhamento vertical
18/11/2007 — Tags: css, hackO 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%;}
.product2 {#position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align:center;}
.product3 {#position: relative; #top: -50%; #left: -50%;}
3 comentários
você pode deixar uma resposta, ou dar um trackback para seu site.
-
1. Aaron:
-
2. Raphael:
-
3. Carlos Aquino: