Centralizar DIVs com imagens de altura diferentes?

[Fábio BN 17]

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!

[bruno_mosciatti 22]

Trabalhe com <ul> e <li>; defina altura para a <li>

[Fábio BN 17]

Ou Tentar. O problema é que cada imagem tem um titulo, seguido de uma foto e um valor. Eu precisaria alinhar tudo isso, vou tentar aqui.

 

Obrigado!

[bruno_mosciatti 22]

Ou Tentar. O problema é que cada imagem tem um titulo, seguido de uma foto e um valor. Eu precisaria alinhar tudo isso, vou tentar aqui.

 

Obrigado!

 

Ok, mas mantendo o código que você já tem, se você deixar height:100% na div que segura a imagem, ela vai respeitar a altura da imagem, com isso, se adicionar uma imagem de 100px de altura e outra de 20px, vai ficar torto mesmo. Para isso, defina a altura da div produto imagem fixa.

[Fábio BN 17]

Oi.

Cheguei numa conclusão que se tentar redimensionar imagens pela altura, algumas imagens podem extrapolar os 205px e estragar o layout .

Quando eu mexia com tabelas, bastava fazer uma tabela de 3 linhas e 3 colunas com Loop, que todas as imagens independente da altura ficaram centralizadas tal como Nome e Preços!

Mas vi que para trabalhar com DIVs, todas imagens precisaram de um tamanho igual para eu poder ajustar na tela pela largura, assim a altura de todas sairão iguais para não estragar o LayOut.

 

 

Abraços!!

 

[bruno_mosciatti 22]

Oi.

Cheguei numa conclusão que se tentar redimensionar imagens pela altura, algumas imagens podem extrapolar os 205px e estragar o layout .

 

Quando eu mexia com tabelas, bastava fazer uma tabela de 3 linhas e 3 colunas com Loop, que todas as imagens independente da altura ficaram centralizadas tal como Nome e Preços!

 

Mas vi que para trabalhar com DIVs, todas imagens precisaram de um tamanho igual para eu poder ajustar na tela pela largura, assim a altura de todas sairão iguais para não estragar o LayOut.

 

 

Abraços!!

 

 

Você está errado!

Primeiro que uso de tabelas caiu em desuso a anos, o tableless é o ideal.

Se ajeitar o estilo da div, pode fazer o que quiser com ela.

[Fábio BN 17]

Bem.

 

Vou explicar.

Usando Tabelas:

 

No exemplo acima, eu usando tabelas.
- Vejam que mesmo produtos com títulos grandes, se alinham, pois quando a linha da tabela fica mais alta, todo o resto acompanha e de centraliza no meio.
- Vejam que as imagens mais baixas e as mais altas se alinha no centro da coluna da tabela.

- Vejam que o preço, ficam todos numa mesma linha independente do tamanho da imagem.

- Tentei fazer isso usando DIVS, tive problemas com a flutuação, e todos os preços ficam colados na base da imagem, e os títulos colam no topo da imagem!

Vejam um exemplo de como ficou usando DIVS:



Vejam que a flutuação não ficou correta, e não consegui alinhar nome nem preço numa mesma linha!

Abraços!

[bruno_mosciatti 22]

Bem.

 

Vou explicar.

Usando Tabelas:

 

No exemplo acima, eu usando tabelas.

- Vejam que mesmo produtos com títulos grandes, se alinham, pois quando a linha da tabela fica mais alta, todo o resto acompanha e de centraliza no meio.

- Vejam que as imagens mais baixas e as mais altas se alinha no centro da coluna da tabela.

- Vejam que o preço, ficam todos numa mesma linha independente do tamanho da imagem.

 

- Tentei fazer isso usando DIVS, tive problemas com a flutuação, e todos os preços ficam colados na base da imagem, e os títulos colam no topo da imagem!

 

Vejam um exemplo de como ficou usando DIVS:

 

 

Vejam que a flutuação não ficou correta, e não consegui alinhar nome nem preço numa mesma linha!

 

Abraços!

 

Pelo visto, trata-se de um e-commerce, certo?! Pra início de conversa, não deveriam ter imagens de tamanhos diferentes.

Enfim, nem dei muita atenção ao que escreveu, apenas bati o olho nas imagens.

com Divs, você pode fazer o que quiser e deixar como quiser, é que você não está sabendo lidar com a estilização (css), apenas isso. Boa sorte com sua tabela rs

[Fábio BN 17]

Entendi.

 

- Na verdade, eu fiz esse site em 2003, naquela época era comum o pessoal usar tabelas! Ao longo do tempo mudei algumas coisas no site mas a página inicial ficou com as tabelas!

 

- Eu vou tentar bolar alguma forma de centralizar as coisas usando as DIVs, pois penso em fazer um LayOut Fluído e responsivo em seguida.

 

 

Eu não entendo muito de CSS, mas estou estudando mais.

 

Eu agradeço o comentários de todos, irei estudar todos para tentar achar uma solução.

 

Obrigado!

 

Fábio!

 

 

 

t