Oi pessoal.
Estou nua situação complicada.
Preciso centralizar imagens de 3 em 3 numa fileira de 7 linhas.
Exemplo:
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
FOTO - FOTO - FOTO
Cada imagem tem de largura fixa width="205", elas estão cadastradas num Banco de Dados, e faço a seleção em LOOP.
O problema é que algumas imagens tem alturas diferentes, imagens curtas colam no topo da DIV, e quando vai pra linha de baixo, vira uma salada, se todas imagens fossem do mesmo tamanho eu não teria esse problema! Existe alguma forma de resolver isso?
Conforme a largura da minha DIV principal, a cada 3 Loops vai para linha de baixo.
<div class="box_produto_geral">
<div class="box_produto_inicial">
<div class="box_produto_nome">Nome</div>
<div class="box_produto_imagem"><img class="fig_home" src="foto01.jpg" alt="Ver Detalhes" width="205" border="0"></div>
<div class="box_produto_valor">R$ 20,00</div>
</div>
</div>
CSS
.box_produto_geral{
background:#FFFFFF; margin-top:2px;
width:100%;
height:auto;
align:center;
margin-left:3px;
}
.box_produto_inicial{
width:205px;
height:100%;
float:left;
margin-top: 2px;
margin-bottom:0;
margin-right:2px;
margin-left:2px;
}
.box_produto_nome{
font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color:#6580be;
}
.box_produto_imagem{
width:100%;
height:100%;
}
.box_produto_valor{
font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color:#ff0000;
width:100%;
height:20px;
background:#F2ECEC;
vertical-align: baseline
}
Cada imagem possui um nome e um preço em baixo, tudo precisa ficar em harmonia.
Abraços!