probleme mit hover und liste und so...

[soel]

hallo,

mich plagt folgendes problem...
ich habe ein menu "system" mit background img, so nun soll aber der text zentriert erscheinen, leider klebt dieser oben am rand!
wenn ich margin top etc versuche, dann verschiebt sich auch die bilder in "a" also die menübilber, der text soll aber quasi in der mitte der bilder zentriert werden...

ja ich weiß is total doo f zu erklären... hier mal der code:
vielen lieben dank für hilfe
soel

<div id="hauptnavi">
<ul class="navi_01">
<li style="margin-left:4px"><a href="#">menu punkt 1</a></li>
<li style="margin-left:6px"><a href="#">menu punkt 2</a></li>
<li style="margin-left:6px"><a href="#">menu punkt 3</a></li>
<li style="margin-left:6px"><a href="#">menu punkt 4</a></li>
<li style="margin-left:6px"><a href="#">menu punkt 5</a></li>
</ul>
</div>

#hauptnavi {
margin:0px auto;
padding:0px;
width:945px;
height:105px;
background:url(bilder/logo.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
float:left;
display:inline;
}

.navi_01{
width:945px;
margin:0px auto;
padding:0px;
list-style-type:none;
color:#000000;
text-align:center;
}
.navi_01 li{
width:127px;
height:100px;
margin:0px auto;
padding:0px;
float:left;
text-align:center;
display:inline;
}
.navi_01 li a{
width:127px;
height:100px;
display:block;
background-image:url(bilder/m1.jpg);
color:#000000;
text-decoration:none;
text-align:center;
}
.navi_01 li a:hover{
width:127px;
height:100px;
background-image:url(bilder/m2.jpg);
color:#FFFFFF;
text-align:center;
}