Tekst centreret i XP bar

Hejsa

Jeg er ved at lave et spil, og dertil skal være en såkaldt XP bar. Det vil sige, at man kan se hvor mange XP man har på en linje. Midt på den linje, skal der så stå fx "Level 19", og når man holder musen over, ændrer det sig til fx "36 / 150 XP".

Mit problem er bare, hvordan jeg får teksten til at stå centreret midt på XP baren? At få lavet selve XP baren er ikke noget problem og til det, har jeg brugt følgende kode. Rettelser der vil gøre det muligt at indsætte tekst er selvfølgelig velkomne - jeg søger bare en løsning til problemet.

 // der er bare sat tilfældige variabler, i spillet bliver det selvfølgelig hentet, så det er brugerens egne.
 $xpNow = 30; 
 $xpToNextLevel = 150; // det XP der skal opnåes for at gå i lvl
 $imgLength = 233; // længden af XP baren
 
 $divided = $xpNow / $xpToNextLevel;
 $overlayLength = $imgLength * $divided;

Den sidste variabel sætter længden af overlayet, og derefter bruger jeg følgende kode til at vise det. HTML først, dernæst CSS.

 <div id="xpBar">
 <div style="background: url(img/xpBarOverlay.png); width: <?php echo $overlayLength; ?>px; height: 25px;"></div>
 </div>

 #xpBar {
     width: 233px;
     height: 25px;
     background: url("img/xpBar.png");
     border: 1px solid black;
     border-radius: 5px;
 }

Måske lidt indviklet forklaring, ellers må I spørge ind til det. Jeg vil sætte stor pris på en løsning!

Mvh.
Christian