Alinhar H4 na verical

[Thiago Nunes 0]

Olá pessoal,

 

Tenho a seguinte estrutura HTML:

 

<ul>
      <li>
          <h4><a href="#">Lorem ipsum dolor sit amet</a></h4>    
      </li>
      <li>
          <h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
      </li>
      <li>
          <h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
      </li>
      <li class="last">
          <h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
      </li>
    </ul>

Preciso alinhar as tags h4 que estão dentro das LI's centralizadas na vertical, porém não estou conseguindo. No print abaixo vocês podem ver como está sendo renderizado:

 

http://tinyurl.com/ch66a8k

 

E aqui é possível visualizar todo o código: http://jsfiddle.net/thiagonunes/RPwWT/

Agradeço desde já.

 

 

[@gsales_ 0]

Boa noite,

 

tente colocar essa linha no css:

#tpl-olimp-atletas-content ul li h4{line-height:60px;}

 

Abs!

[Public2004 79]

Com "line-height" terá problemas se houver quebra de linha...

Uma solução seria utilizar no container "UL": "display:table;";

E nos "LIs": "display:table-cell;" + "vertical-align:middle;"

 

Att.

[@gsales_ 0]

Se ele esta lidando com H4, eh provavel que nao tenha quebra de linha e o vertical-align não funciona no IE7

[Public2004 79]

Se ele esta lidando com H4, eh provavel que nao tenha quebra de linha e o vertical-align não funciona no IE7

 

Estamos colaborando. Soluções com propriedades "line-height, display, positions e margins" podem ser adequadas conforme a necessidade, mas parece que o autor já deve ter resolvido o problema pois não há retorno do mesmo.

 

Att.

[Thiago Nunes 0]

Olá pessoal,

Só pude retornar agora, estava bem corrido aqui no trabalho. @gsales_ usei sua solução e como o Public2004 falou tive problemas com a quebra de linha, o h4 inicialmente era apenas um título. O que devo fazer para que fique centralizado e caso tenha mais conteúdo seja exibido corretamente em todos navegadores?

Agradeço a todos pela ajuda!

[Buchechafs 6]

Thiago coloque o line-height sempre o valor final do height <li>.

 

Como assim ?

 

Tenho uma <li> com o height 100px; e quero centralizar o conteúdo dentro dessa div.

 

Então irei colocar o line-height:100px;

[Thiago Nunes 0]

Buchechafs, obrigado!