Top Menu - Text nach unten zentrieren

Ich möchte das ich einen Text in Form eines Links auf ein Bild, der Top Leiste, setze. Das funktioniert auch nur ich würde den Text gerne in der Mitte des Bildes haben. Kann man einen Text in meinem Fall nach unten zentrieren?

Script:

<div align="center" style="width:800px; height:50px; background:url(http://www.mediafire.com/convkey/a5d0/pha5y27a50wbpq1fg.jpg) no-repeat;">
<a id="TopMenuLink" href=""><b><u>Home</u></b></a> <a id="TopMenuLink" href=""><b>Games</b></a> <a id="TopMenuLink" href=""><b>Roster</b></a>
<a id="TopMenuLink" href=""><b>Awards</b></a> <a id="TopMenuLink" href=""><b>Wallpaper</b></a> <a id="TopMenuLink" href=""><b>AGB</b></a>
</div>
<style type="text/css">
#TopMenuLink {
padding: 15px;
margin: 15px;
color: #00b200}
</style>

Danke schön man! Thread/Topic/ w/e. bitte offen halten. Werde später noch zukünftige Fragen, zum gleichen Thema, stellen.

Hat mir geholfen, damit's komplett mittig war hab ich line-height: 40px; gemacht.

Ich werde meine eigentlich nächste Frage schon mal stellen:
- Wie kann/könnte ich es machen das wenn: ich mit der Maus über einen der Links(Dessen Text) halte der Text unterstrichen wird, und sobald ich wieder vom Link runter gehe er nicht mehr unterstrichen ist???

Danke schon mal im Voraus!

1. Ja tut mir Leid wegen dem Wirrwar!!! Ich bin neu in HTML und kann/konnte meine alte Form des scriptens von C++ und UnrealScript nicht in HTML beibehalten werde aber deinen Ratschlag befolgen. Ich hatte ja auch alles kopiert nur den Wert geändert.

2. Du hast die Seite auf der du bist als class "aktiv" "markiert" und in CSS dann underlinded. Dennoch weiß ich nicht wie ich dass mit dem Curser hinbekommen kann, ich würde es mit einer If-Abfrage machen, wenn es das geben würde.

So wie du das gemacht habe kann ich das auf jeder Seite statisch und für die die jeweilige aktive Seite verändern aber doch nicht wenn ich mit dem Curser drüberhalte? Oder irre ich mich da? Wahrscheinlich stelle ich mich auch gerade nur zu dumm an aber ich blick da noch nicht ganz durch...

<div id="menu"><a href="Index.html" class="aktiv">Home</a><a href="Games.html">Games</a><a href="Roster.html">Roster</a><a href="Awards.html">Awards</a><a href="Produkte.html">Produkte</a><a href="AGB.html">AGB's</a></div><style> #menu{	 text-align: center; width: 950px; background:url('http://www.mediafire.com/convkey/877b/wzkwfsgwc2ax5b4fg.jpg') no-repeat;
	height: 150px;	line-height: 160px; }	#menu a{	 margin: 20px; color: #00b200; text-decoration: none; font-weight: bold; }	 #menu a.aktiv{	text-decoration: underline; }</style>

So, mit dem Code geht das alles ganz schön, nur ich würde dass der Text auf dem Hintergrundbild jeweils neben diesen 2 Dreiecken ist und dann über dem Logo nichts ist, also ein Platzhalter. Ich habe versucht das ganze mit "margin: #px; zu erhöhen, geht abern icht gleich auf da jeder Text des Linkes unterschiedlich lang ist. Den Platzhalter würde ich mit ca. 2 bis 3 davon hinbekommen:

<div id="menu">	<a href="Index.html" class="aktiv">Home</a>	<a href="Games.html">Games</a>	<a href="Roster.html">Roster</a>	<a href=""></a>	<a href=""></a>
	<a href=""></a>
	<a href="Awards.html">Awards</a>	<a href="Produkte.html">Produkte</a>	<a href="AGB.html">AGB's</a></div>

Aber ich dachte mir: Es muss doch auch anders gehen, so per Koordinaten halt für jeden einzelnen Text bzw. Link.

EDIT: Sry dass der hier so ein Schwachsinn macht(In der Quelltextanordnung), KA warum der das anders macht als ich das will...

Schon probiert/geht nicht so wie ichs mir vorstelle, ich habe schon andere Lösung gefunden.

<div id="menu">			<a style="position: absolute; height: 0px; left: 300px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/Index.html" class="aktiv">Home</a>			<a style="position: absolute; height: 0px; left: 440px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/Games.html">Games</a>			<a style="position: absolute; height: 0px; left: 580px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/Roster.html">Roster</a>			<a style="position: absolute; height: 0px; left: 785px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/Awards.html">Awards</a>			<a style="position: absolute; height: 0px; left: 920px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/Produkte.html">Produkte</a>			<a style="position: absolute; height: 0px; left: 1080px; top: 27px" href="file:///C:/Users/Christof/Desktop/AYS%20website/AYS-Basic/AGB.html">AGB's</a>		</div>		<style>		#menu{			text-align: center;			width: 950px;			background:url('file:///I:/Gimp/Projekte/AYS/AYS WebsiteNew/TopMenuBar.png') no-repeat;			border-bottom-left-radius: 10px;			border-bottom-right-radius: 10px;						height: 150px;			line-height: 160px		}		#menu a{			margin: 0px;			color: #00b200;			text-decoration: none;			font-weight: bold;		}		#menu a.aktiv{			text-decoration: underline;		}		</style>

Kann mir bitte jemand erklären wie ich das hinbekomme das im Post nicht alles in 1 Zeile ist???