Hintergrundbild korrekt positionieren

[Moritz]

Hallo,

ich habe hier ein etwas trickreiches Problem: Ich möchte gerne vor zwei Links kleine Icons anzeigen, welche sich in einem Imagesprite befinden. Diese Icons sind jeweils 15px breit und 15px hoch, die Schrift hat eine Größe von 11px. Ich bekomme es auch jetzt soweit hin, dass die korrekten Icons vor den jeweiligen Links angezeigt werden, allerdings ist es so, dass durch die unterschiedlichen Größen von Icon und Schrift der Text immer von dem Icon überragt wird.
Meine Frage ist nun, wie ich den Text relativ vertikal zentriert zum Icon ausrichten kann.
Mein Code sieht nun wie folgt aus:

<span id="my_invitation_accept_{$grp.id}" class="my_invitation_action my_invitation_accept"><span class="my_invitation_icon_accept"></span> annehmen</span>
<span id="my_invitation_decline_{$grp.id}"  class="my_invitation_action my_invitation_decline"><span class="my_invitation_icon_decline"></span> ablehnen</span>

Das zugehörige CSS sieht so aus:

span.my_invitation_action { display: table-cell; vertical-align: middle; height: 15px; }
span.my_invitation_icon_accept { width: 15px; height: 15px; display: inline-block; background: transparent url(../wa_images/sprite.png) -246px 7px no-repeat;}
span.my_invitation_icon_decline { width: 15px; height: 15px; display: inline-block; background: transparent url(../wa_images/sprite.png) -275px -2px no-repeat;}

Vielen Dank an Euch!

[Rinaldo]

Hilft Dir das Beispiel weiter?

Eigentlich würde ich ja so etwas mit Hilfe einer Liste umsetzen - finde das besser als mit <span> und anderen Umwegen.