Schrift genau in die Mitte des Buttons setzen

[Steffi]

Hi,
ich bin grad dabei die Seite von der Astro-Ag meiner Schule vom Design zu ändern.

Hab jetzt einen Hintergrund für die Button erstellt und wollte dann erst  mit HTML die Schrift drauf machen.
Tja sie is auch drauf und sogar central, NUR oben "hingeklascht".
Ich würde sie gern in der Mitte haben, aber es ist das erste mal, dass ich mit css und java arbeite und ich find keinen passenden befehl...

<div align="center">
                <ul id="csstopmenu">
                        <li class="mainitems">
                                <div class="headerlinks" ><a href="himmel.html"><font size="+2">Himmel</font></a></div>
                        </li>
                        <li class="mainitems">
                                <div class="headerlinks"><a href="wir.html"><img src="btn/wir.JPG" width="127" height="32" border="0" alt=""></a></div>
                        </li>
                        <li class="mainitems">
                                <div class="headerlinks"><a href="taetigkeiten.html"><img src="btn/taetigkeiten.JPG" width="127" height="32" border="0" alt=""></a></div>
                                    <ul class="submenus">
                                        <li><a href="taetigkeiten.html">Tätigkeiten</a></li>
                                        <li><a href="themen.html">Themen</a></li>
                                        <li><a href="news.html">News</a></li>
                                        <li><a href="vorhaben.html">Vorhaben</a></li>
                                </ul>

...

CSS:

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{

}

.headerlinks a{

background:url(btn/alle.JPG);
width: 8em;
height: 2.3em;

margin: auto 1px;
color: #dfdfdf;
}

.headerlinks a:hover{
background-color: burlywood;
margin: auto 1px;
color: royalblue;
}

.submenus{

display: none;
width: 100%;
position: absolute;
botton: 0;
left: 0;
}

.submenus li{
background:url(btn/alle2.JPG);
margin: 1px;
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 10px;
color: #dfdfdf;
font-weight: bold;
}

html>body .submenus li a{ /* non IE browsers */

width: auto;
}

.submenus li a:hover{
color: royalblue;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {

display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
body{
color: #dfdfdf;
}

und Java:

<script type="text/javascript">

startMenu = function() {
        if (document.all&&document.getElementById) {
                cssmenu = document.getElementById("csstopmenu");
                for (i=0; i<cssmenu.childNodes.length; i++) {
                        node = cssmenu.childNodes[i];
                        if (node.nodeName=="LI") {
                                node.onmouseover=function() {
                                        this.className+=" over";
                                }
                                node.onmouseout=function(){
                                        this.className=this.className.replace(" over", "")
                                }
                           }
                }
           }
}

if (window.attachEvent)
        window.attachEvent("onload", startMenu)
else
        window.onload=startMenu;

</script>

Es werden bestimmt noch ein paar andere Fragen folgen, also hab ich gleich ma fast alles kopiert = /
Wäre schön, wenn mir jemand helfen kann!

Steffi

PS: Wenn ihr sinnlose Zeilen entdeckt, wäre es schön, wenn ihr bescheid sagt!