5

estou fazendo um grid de imagens (que serão links para o lightbox), quero 5 imagens por linha, mas elas tem tamanhos diferente, então fiz o seguinte html para cada imagem:

 <div class="thumb">
<a href="images/900x600/img01.jpg" data-lightbox="gallery">
    <img src="images/thumbs/thumb01.jpg" alt="">
</a>
 </div>

E no CSS ficou assim:

.thumb {
 width: 180px;
 height: 180px;
 position: relative;
 float: left;
}
.thumb img {
 position: relative;
 margin: auto;
 display: block;
}

Para ficar tudo certinho, o ideal seria que as imagens ficassem alinhadas tanto vertical quanto horizontalmente dentro das suas divs, que tem 180px cada, fazendo com que fiquem 5 imagens por linha pois meu layout tem 900px de largura. Para alinhas na horizontal, usei margin: auto e display: block, mas não consigo alinhar na vertical, já tentei usar vertical-align, colocar um span.helper, com height 100% e inline block, usar line-height, mas nenhum deles funciona. E se eu não uso display: block nas imgs, elas não alinham nem horizontalmente. Como faço para centraliza-las?

EDIT: Um detalhe que não havia mencionado, são 45 imagens, todas com tamanhos diferentes, então fica difícil definir no html ou css as dimensões de cada uma delas, pois acredito que aumentaria consideravelmente o tamanho do arquivo ou acham que não?

5
  • Basta definir o tamanho da imagem no css, pois se a imagem não tem o tamanho definido ele não consegue centralizar e terá de colocar o a que é pai da imagem com display block para que a imagem centralize dentro do a. Commented 21/05/2014 às 12:43
  • O problema é que são 45 imagens, de tamanhos variados, terei que definir o tamanho para cada uma delas?
    – pitalig
    Commented 21/05/2014 às 13:37
  • A forma mais fácil seria essa, de colocar o tamanho em casa imagem, senão fazer um javascript, mas não aconselharia, por css desempenho é melhor. Commented 21/05/2014 às 13:41
  • E é melhor definir o tamanho no próprio html ou criar uma classe para cada imagem e definir com css?
    – pitalig
    Commented 21/05/2014 às 13:44
  • Nesse caso é melhor colocar no html mesmo. Commented 21/05/2014 às 13:50

0

Pesquise outras perguntas com a tag .