Centra Verticalmente

[Mirth 0]

Ola..

Eu estou tentando fazer um menu em CSS em que o botão é uma imagem externa com um texto por cima.

 

Tudo sai bem, mas não consigo que o texto fique centrado verticalmente no botão. Como posso fazer?

 

Meu código:

<DIV ID="menu">				<ul id="listmenu">					<li class=”news”><a href=”#”>News</a></li>					<li class=”media”><a href=”#”>Media</a></li>					<li class=”forum”><a href=”#”>Forum</a></li>					<li class=”about”><a href=”#”>About</a></li>		   	</ul> </DIV>CSS:#menu {	height: 30px;}ul#listmenu {	margin: 0; 	padding: 0;	list-style-type: none;	width: 450px;	display: inline;}ul#listmenu li { 	display: inline;	float: left;}ul#listmenu li a, ul#listmenu a:visited {	display: block;	width: 75px;	height: 30px;	font-weight: bold;	font-size: 12px;	text-align: center;	background-image:  url(imgs/botao.gif);}

[Giovani 104]

Um solução é trabalhar o padding e o height até achar a posição que você acha melhor.

[Mirth 0]

Um solução é trabalhar o padding e o height até achar a posição que você acha melhor.

Pois, eu tento usar o padding, mas ao usa-lo o botão ocupa mais espaço..

[Hunter_ 0]

tente display block na li

[Paulo de Tarso F. M. 24]

Na verdade, não é que o botão ocupa mais espaço, você não está fazendo os cálculos corretamente... Veja como isso pode ser feito:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Atributos: border - padding - margin

Mas nesse caso aqui, tente adicionar a propriedade line-height:

ul#listmenu li a, ul#listmenu a:visited {	display: block;	width: 75px;	height: 30px;	font-weight: bold;	font-size: 12px;	text-align: center;	background-image:  url(imgs/botao.gif);	line-height: 30px; /* Testa com isso, veja se dá certo */}

Não custa nada tentar, né?

 

Abraço!