HTML: Text über bestimmter Position auf Grafik anzeigen

[T.E.]

Moin Moin!
Also ich habe ein klitze kleines Problem, was mich im moment nahezu zum verzweifeln bringt.
Und zwar möchte ich gerne einen Counterstand über einer bestimmten Grafik (siehe ANhang) anzeigen, und zwar so, das die Counterzahl immer genau in der Mitte der Grafik ist.

Zur Zeit verusche ich das so:
CSS Code

Code:

#counter{
height:100%; 
z-index:1;
}
#counter_text{
font-size:1.5em; 
font-weight:bold; 
color:#1860A8;
height:100%;
z-index:2;
}

und der Code in der Wiedergabeseite:

Code:

<div id="counter">[img]images/counter.gif[/img]</div>
<div id="counter_text">
<?php   
//COUNTERSTAND ERMITTELN
echo $counter;
?>
</div>

leider ist das derzeitige ergebnis nur, das der Stand unterhalb der Grafik angezeigt wird (siehe Screenshot)!

Kann mir da vllt mal jemand sagen, wie ich das am besten löse?

EDIT: Diverse Suchanfragen bei Google haben mich auch nicht weiter gebracht...