Inline-Element vertikal positionieren (Link in dynamischem Button)

[Knulp]

Hallo,

ich steh bei einer kleinen CSS-Sache irgendwie auf dem Schlauch und hoffe, ihr könnt mir helfen.

Und zwar will ich nen Link in einem Button vertikal zentrieren. Da die Höhe statisch ist, reicht auch Trickserei mit padding/margin-top. Nur funktioniert das im aktuellen IE nicht und auch bei Firefox sieht's nicht ganz sauber aus, wenn man drauf klickt.

Betrachtet bitte zur Veranschaulichung den Screenshot im Anhang.

Meine CSS-Definition:

.link_f {

float: left;

margin-right: 10px;

}


.link_l {

background: url(bg/link_l.gif) left no-repeat;

height: 27px;

}


.link_r {

background: url(bg/link_r.gif) right no-repeat;

height: 27px;

}

Das rechte Bild ist das kurze Ende, das das linke überlagern soll, der Button soll sich dem Inhalt also nur der Länge nach anpassen. Die Formatierung zum Link (damit wird der Link im Firefox mittig dargestellt, nicht aber im IE):

.middle-text a

{

	vertical-align: middle;

	color: #ffffff;

	padding: 10px 8px 0 8px;

}

Ich wär sehr froh, wenn mir hier jemand mit Ahnung sagen kann, wie ich das vernünftigerweise umsetzen soll.

Dankeschön!

KnUlP