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

 
  • Pô,

    falar de uma coisa em CSS sem mostrar um exemplo, é a mesma coisa de apresentador de programa de culinária dizendo que o sabor do prato é divino !

  • Raphael

    Não funciona em resoluções diferentes!!!!

  • Aaron

    q xunxo podre não existe forma de alinhamento central vertical. tem que usar tabela.

  • Jônatas

    Se não for necessário colocar o link da imagem para o usuário, somente deixar ela de fundo, têm uma maneira mais fácil:

    css:

    #imagem {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff url(arquivos/imagem.jpg) no-repeat center center;
    }

    * o center center, alinha primeiro a imagem na horizontal no centro, e o na vertical centro de novo.

  • Para alinhar no centro:
    top :50%
    left:50%
    margin-left:-(tamanho da imagem/2)px;
    margin-left:-(tamanho da imagem/2)px;

    Simples assim.

    http://www.choqueweb.com

  • Tem uma forma bem ilustrativa explicando como fazer Alinhamento vertical e horizontal com CSS….

    mas a idéia inicial é a mesma….

  • Se o elemento pai tiver pelo menos uma altura fixa use o line-height

  • A propriedade tabela não funciona no IE.