Vertical align - sempre ele

[Daniel Fernando 0]

Estou com problemas para centralizar o texto verticalmente

 

Aqui a página clique aqui

 

Reparem nos botões azuis a esquerda, o texto esta ficando no topo, tentei usar o line-height e funcionaria se o texto fosse só de uma linha, mas como terá textos maiores não quer funcionar.

[Thiago Retondar 18]

À quem você se refere?

 

Menu ou barra vertical? Ambas são azuis! <_<

 

Se for a vertical, não vai funciona mesmo, pois você aplicou no a um display: block e vertical-align só funciona em elementos inline.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Fernando 0]

É na vertical mesmo, o display: block não é tão essencial. Como você faria pra centralizar?

[Thiago Retondar 18]

Crie uma parágrafo para o texto e coloque verical-align: middle.

 

Se não me engano, no blog do Bruno Dulcetti tem um bom tutorial sobre.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Fernando 0]

Não funcionou, Entrei no site do Bruno e achei a explicação bem feita, só que ele usa uma div e eu estou usando uma lista (ul li), já testei algumas alternativas, mas não consigo fazer funcionar de jeito nenhum.

[Thiago Retondar 18]

O que no caso não é necessário essas listas...

 

Faça com div e class, facilitando seu trabalho.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Fernando 0]

Sim, vou fazer com divs mesmo, mas como ali é um menu achei que seria mais correto fazer como lista.

 

Mas, valeu, muito obrigado.

[Thiago Retondar 18]

Na verdade eu falei m*****! http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

A ul, ol e li são elementos de blocos, tão bons quanto a div.

 

Faça o seguinte, tire o display: block do a e dentro dele, coloca, o texto, dentro de um p. Assim vai ficar igual ao exemplo do Bruno.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Fernando 0]

Desculpa a minha ignorância, mas não consigo fazer funcinar de jeito nenhum.(usando as listas)

[Thiago Retondar 18]

Uai... Aqui deu certo... :mellow:

 

Testa aí:

 

<ul id="menu">
<li>
	<a href="#">
		<img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
	</a>
</li>
<li>
	<a href="#">
		<img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
	</a>
</li>
<li>
	<a href="#">
		<img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
	</a>
</li>
<li>
	<a href="#">
		<img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
	</a>
</li>
</ul>

 

#menu {background-color:# F7F6F1;border:2px solid #CCC;height:200px;padding:5px; width:400px;}
#menu img {vertical-align:middle;}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Fernando 0]

Desculpa a demora, só agora é que estou conseguindo responder.

 

Então, funciona só quando o texto é pequeno, no meu caso o texto do link é maior, fazendo com que o restante caia por baixo da imagem. Faz um teste aí pra você ver, igual este exemplo que me mandou, coloca um texto bem maior no link.

 

Obrigando pela atenção http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif