ustawienie tekstu w <li>

[A_D_M]

Witam, robie przyciski na strone (sa dwa typy, jeden nazwalem "menu" a drugi "menus", mam zrobiona grafike jak wyglada przed najechaniem myszka i po i jest tam okreslony tekst na tym pisany z poziomu index.php, wyglada to tak:

Kod:

<ul id="menu">
<li>xyx</li>
<ul id="menus">
<li>xyz2</li>
</ul>

a w style.css mam to:

Kod:

#menu li {
color: white;
background-image: url("bigbutton.png");
height: 26px;
width: 174px;
font-size: 10px;
}

#menu li:hover {
background-image: url("bigbutton2.png");
color: white;
}

#menus li {
color: white;
margin-left:24px;
background-image: url("smallbutton.png");
height: 20px;
width: 149px;
font-size: 9px;
}

#menus li:hover {
background-image: url("smallbutton2.png");
color: white;
}

I problem jest ze ten tekst xyx i xyz2 dotykaja bezposrednio lewej gornej krawedzi przycisku i wyglada to beznadziejnie. Z kolei jak wezme te komende "text-align-center" to jest fajnie po srodku ale nadal zahacza o gorna krawedz, chcialbym zeby bylo tez oddalone od gory buttona. Jak to osiagnac?
Z gory dziekuje