Vertical-align in <li> elements

[soltek]

Hey there, I'm having quite a hard time trying to center the elements inside a div.

Please, take a look at my code:

 

 

||HTML PART||

<div id="baresq">
<div id="cats">
	<ul>
	<li><img src="imagens/botoes-cat/1.png" alt="" height="26" width="39"/>1</li>
	<li><img src="imagens/botoes-cat/2.png" alt="" height="26" width="39"/>2</li>
	<li><img src="imagens/botoes-cat/3.png" alt="" height="26" width="39"/>3</li>
	<li><img src="imagens/botoes-cat/4.png" alt="" height="26" width="39"/>4</li>
	<li><img src="imagens/botoes-cat/5.png" alt="" height="26" width="39"/>5</li>
	<li><img src="imagens/botoes-cat/6.png" alt="" height="26" width="39"/>6</li>
	<li><img src="imagens/botoes-cat/7.png" alt="" height="26" width="39"/>7</li>
	</ul>
</div>

</div>

 

 

 

 

||CSS PART||

#baresq {
width: 193px;
border: 1px solid white;
float: left;

}

#cats {
width: 193px;
height: 287px;
background: url('imagens/baresq/x.png') no-repeat;
background-color: #0d1116;
}

#cats ul {	
width: 181px;
color white;
list-style: none;
padding-left: 6px;
padding-right: 0px;
vertical-align: middle;
}

#cats ul li {
vertical-align: middle;
height: 26px;
font-family: "Microsoft", sans-serif;
background: url('imagens/botoes-cat/cat-bg.png') no-repeat;
color: #fff;
font-size: 14px;
border: 1px solid white;
}

 

I've tried the vertical-align property, the text-bottom and I got nothing. The text inside the li

still get glued to the bottom :S

Id want them at the middle of the li.

Any clues?

Thank you in advance.

[haku]

set line-height equal to the height of the element.