Schmidt: Text vertikal zentrieren trotz float:left

Beitrag lesen

Hallo ihr Lieben.

Mein heruntergebrochenes CSS-Problem:

  
<button style="width:100%;" name="Klickmich" type="button" value="Überraschung">  
	<img src="bsp1.png" width="30" height="30" style="margin-right:10px; float:left;" alt="ALT1-Text">Ein kurzer Beispieltext.  
</button>  
<br />  
<button style="width:100%;" name="Klickmich" type="button" value="Überraschung">  
	<img src="bsp2.png" width="30" height="30" style="margin-right:10px; float:left;" alt="ALT2-Text">Ein längerer Beispieltext, der bei einem schmalen Fenster zum Umbruch führt, was jedoch auch schön aussieht und gerne so bleiben soll.  
</button>  

Ich möchte, dass die Bilder bündig links ausgerichtet sind, der Text jedoch horizontal zentriert. Das funktioniert mittels float:left; auch sehr gut.

Nun würde ich mir wünschen, dass der Text vertikal zentriert ist, falls er nur eine Zeile bildet.

Nach Stunden des Lesens, Rätselns, Ausprobierens bin ich zu keinem Ergebnis gekommen.

Hat jemand eine helfende Idee?

(Ich hatte mich sogar gedanklich schon mit einem Workaround angefreundet: eine Art margin-top für den Text. Allerdings funktioniert es nicht, ohne die schöne float:left; Eigenschaft zu zerstören.)

Vielen Dank
Schmidt