Text Not Centering Over Background Image

[kreatur]

Hi, i'm new at this, so don't get scared by my code.This is the site uploaded for test purposes on a free host: http://kreatur.0fees.net/galerie.htmlNow, the problem is i can't find a way to make that text come down to the center of the button from the gallery. My code may be messed up, but i can't find a solution to fix it. Top padding only lowers the text on the first row, while the text on the second row comes down together with the background and the thumbnailPiece of the HTML for the upper row:

  <td>	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<span class="butonel1">Usi de garaj Albe&Color</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>  <td>  	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<span class="butonel2">Usi de garaj Imitatie Lemn</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>	  <td>  	<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]" title="my caption">	<img src="galerie/usi_de_garaj_015-1.png" width="187" height="124" /></a>		<a href="galerie/usi_de_garaj_023.jpg" rel="lightbox[galerie]">	<span class="butonel3">Usi de garaj Meranti</span>	</a>	<a href="galerie/usi_de_garaj_015.jpg" rel="lightbox[galerie]" title="my caption"></a></td>

messed up CSS :]

.butonel3, .butonel2, .butonel1, .butonel4, .butonel5, .butonel6{	background-image: url('images/buton-interior.png');	width:187px;	height:32px;	float:left;	background-repeat: no-repeat;	text-decoration: none;	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #FFFFFF;	font-weight: bold;	text-align: center}.butonel1:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}.butonel2:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}.butonel3:hover{	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	color: #000000;	text-decoration: none;}etc. for the second row

Edited August 9, 2009 by kreatur

[dsonesuk]

add a line-height:.butonel3, .butonel2, .butonel1, .butonel4, .butonel5, .butonel6 {background-image:url(images/buton-interior.png);background-repeat:no-repeat;color:#FFFFFF;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;height:32px;text-align:center;text-decoration:none;width:187px;line-height:32px;}

[kreatur]

I swear i remember trying to add a line height, but i've been up for over 30 hours and half of them working on the site, so it must of slipped through all the info, thank you.