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?