Trabalhar com a Mesma classe "indidualmente"

[Luc.Vysk 0]

Olá galera,

 

estou com um pequeno problema de posicionamento.

Tenho uma lista, parecida com uma tabela, listando produtos. Seria a "Cesta".

 

Todos têm uma margem superior de '20px'. Porém algumas vezes o nome do produto quebra linha 3x.

E quero posicionar o "título" sempre no meio da linha, seria o 'valign=middle' do table.

 

O problema pode ser resolvido com o seguinte código:

 

var lnprod = $('.prod').height();
var lnsprod = lnprod - $('.cestlg_tit').height();

$('.cestlg_tit').css({'marginTop' : lnsprod });

 

No entanto, ele, obviamente, aplica o css a todas as divs, que por consequencia não funciona. Eu preciso trabalhar com todas as divs individualmente, assim quando tiver 1 linha, ou 3 linhas, ele estará sempre no meio.

 

Pensei na solução de colocar o css na tag (style="..."). Mas não sei fazer isso.

 

Alguma outra sugestão, ajuda?

 

Desde já obrigrado,

Lucas

[William Bruno 1501]

você pode usar o método .each() para aplicar o css individualmente, uma por uma.

 

ou ainda melhor, use apenas css(sem nada de javascript). O vertical-align do css funciona, desde que você o use corretamente.

[Luc.Vysk 0]

Sim, tentei com o each, mas vale lembrar que eu estou trabalhando com a margem na classe. Logo quando em uma div eu alterar a classe, eu vou prejudicar a outra. Por isso comentei do css na tag.

 

E eu até pensei no "vertical-align", mas eu nunca consegui fazer ele funcionar, rs.

 

Eu consegui uma solução por css mesmo, acabei de encontrar:

 

<div class="greenBorder" style="display: table; height: 60px; #position: relative; overflow: hidden;width:340px;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; top: -50%">
              Lorem ipsum </br>
              Lorem ipsum              
       </div>
  </div>
</div>

 

É gambiarra né?! Mas, funciona...

[William Bruno 1501]

Sim, tentei com o each, mas vale lembrar que eu estou trabalhando com a margem na classe.

então aplique no elemento:

$( this ).css()...

Entendeu ? ai sim o .each faz todo sentido.

 

 

 

 

E eu até pensei no "vertical-align", mas eu nunca consegui fazer ele funcionar, rs.

eu fiz ele funcionar aqui:

 

http://www.hospedagemsobmedida.com.br/

 

veja as caixinhas depois que você começa a interação(embaixo do box principal). Cada caixa tem uma quantidade de linhas diferente da outra, e estão todas centralizadas verticalmente.