css

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>

Fonte

Interactions

Webmentions

Like this content? Buy me a coffeeor share around:

0 Like

0 Reply & Share