Text vertikal zentrieren trotz float:left

[Schmidt]

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

[romy]

Hallo Schmidt,

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

Keine Ahnung, ob es das ist was du suchst, aber du kannst um den Text einen Absatz setzen (<p>) und dies erzielt die gewünschte Zentrierung des Textes.

<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"><p>Ein kurzer Beispieltext.</p>
</button>

  
  
  
ciao  
romy

[Schmidt]

Keine Ahnung, ob es das ist was du suchst, aber du kannst um den Text einen Absatz setzen (<p>) und dies erzielt die gewünschte Zentrierung des Textes.

<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"><p>Ein kurzer Beispieltext.</p>
</button>

  
  
Hallo Romy,  
  
Ich habe deinen Vorschlag ausprobiert:  
-Opera: vertikal zentriert  
-Safari: oben ausgerichtet  
-Firefox: vertikal zentriert  
-Chrome: oben ausgerichtet  
  
Der Vorschlag führt also leider nicht zu Erfolg.  
  
Aber ich merke, dass ich mich vielleicht nicht richtig ausgedrückt hatte.  
Was ich mir wünsche ist:  
  
Bei einzeiligem Text:  
-Bild links ausgerichtet.  
-Text horizontal zentriert (in etwa)  
-Bild und Text vertikal zentriert auf einer Höhe (!)  
  
Bei mehrzeiligem Text:  
-Bild links ausgerichtet  
-Text horizontal zentriert (in etwa)  
-Text umfließt Bild in etwa wie bei float:left des Bildes  
  
Gruß  
Schmidt

[romy]

Hallo Schmidt,

Ich habe deinen Vorschlag ausprobiert:
-Opera: vertikal zentriert
-Safari: oben ausgerichtet
-Firefox: vertikal zentriert
-Chrome: oben ausgerichtet

Ich hab hier nur einen IE 9 ;) bei dem ist es auch vertikal zentriert.

Aber ich merke, dass ich mich vielleicht nicht richtig ausgedrückt hatte.

Doch doch, ich hab schon verstanden, sehe aber keine weitere Lösung. Zudem möchtest du ja sicherlich auch, das der Text mittig zum Bild ist und nicht auch oben am Bild beginnt. Bei der p-Variante sieht es ja quasi auch erst bei zwei Zeilen schön aus.
Es gibt natürlich eine Variante, aber die ist zumindest mal textauszeichnungsmäßig sehr doof, keine Ahnung, ob die in allen Browsern geht, zu vermuten wäre es ja.

  
<button style="width:100%;">  
  <table>  
  <tr>  
  <td style="vertical-align:middle;margin:10px;"><img src="bsp2.png" width="30" height="30"></td>  
  <td style="vertical-align:middle;margin:10px;">Ein längerer Beispieltext, der bei einem schmalen Fenster zum Umbruch führt, was jedoch auch schön aussieht und gerne so bleiben soll.</td>  
  <tr>  
  </table>  
</button>  

ciao
romy

[romy]

Hallo Ingrid,

hab die mittig-Angaben vergessen.

  
<button style="width:100%;">  
  <table>  
  <tr>  
  <td style="vertical-align:middle;margin:10px;width:30px;border:"><img src="bsp2.png" width="30" height="30"></td>  
  <td style="vertical-align:middle;margin:10px;width:100%;text-align:center;">Ein längerer Beispieltext, der bei einem schmalen Fenster zum Umbruch führt, was jedoch auch schön aussieht und gerne so bleiben soll.</td>  
  <tr>  
  </table>  
</button>  

ciao
romy

[Matthias Apsel]

Om nah hoo pez nyeetz, Schmidt!

Hat jemand eine helfende Idee?

Bilder in einem Button sind Verzierung, kein Inhalt. Verwende deshalb eine Hintergrundgrafik.

Matthias

[Schmidt]

Bilder in einem Button sind Verzierung, kein Inhalt. Verwende deshalb eine Hintergrundgrafik.

Latsche diwes, Matthias!

Nun, ich habe deinen Hinweis mal ausprobiert:

  
<button style="width:100%;background-image: url(bsp.png);background-repeat: no-repeat;" name="Klickmich" type="button" value="Überraschung">  
			Ein längerer Beispieltext, der bei einem schmalen Fenster Ein längerer Beispieltext, der bei einem schmalen Fenster Ein längerer Beispieltext, der bei einem schmalen Fenster Ein längerer Beispieltext, der bei einem schmalen FensterEin Beispieltext.  
		</button>  

Das Hintergrundbild ist (wie es auch soll) im Hintergrund und wird von dem Text überdeckt.

Das ist in meinem Fall nicht praktikabel.

Das Bild verdeutlicht als Piktogramm was der Button bewirkt, bzw. wohin er führt. Das Bild ist in meinem Fall somit nicht nur einfache Verzierung, sondern transportiert wichtigen Inhalt. Es dient dem schnellen Erfassen und zuordnen der Funktion und somit dem möglichst intuitiven und schnellen zurechtfinden. Aus Gründen der Barrierefreiheit und zur Sicherung des eindeutigen Verständnisses, sowie zur Erklärung versehe ich den Button noch eindeutig und klar verständlich mit Text. Ich betrachte das Piktogramm somit als Inhalt.

Schreibe mir gerne noch Einwende, falls du welche hast.

Ich befürchte meinen Wunsch nicht deutlich genug formuliert zu haben:
Was ich mir wünsche ist:

Bei einzeiligem Text:
-Bild links ausgerichtet.
-Text horizontal zentriert (in etwa)
-Bild und Text vertikal zentriert auf einer Höhe (!)

Bei mehrzeiligem Text:
-Bild links ausgerichtet
-Text horizontal zentriert (in etwa)
-Text umfließt Bild in etwa wie bei float:left des Bildes

Gruß
Schmidt

[Matthias Apsel]

Om nah hoo pez nyeetz, Schmidt!

Bilder in einem Button sind Verzierung, kein Inhalt. Verwende deshalb eine Hintergrundgrafik.

Das Bild verdeutlicht als Piktogramm was der Button bewirkt, bzw. wohin er führt. Das Bild ist in meinem Fall somit nicht nur einfache Verzierung, sondern transportiert wichtigen Inhalt. Es dient dem schnellen Erfassen und zuordnen der Funktion und somit dem möglichst intuitiven und schnellen zurechtfinden. Aus Gründen der Barrierefreiheit und zur Sicherung des eindeutigen Verständnisses, sowie zur Erklärung versehe ich den Button noch eindeutig und klar verständlich mit Text. Ich betrachte das Piktogramm somit als Inhalt.

recht so. Dennoch gehört das Piktogramm zum Button, denn es überträgt keinen zusätzlichen Inhalt.

Ich befürchte meinen Wunsch nicht deutlich genug formuliert zu haben:
Was ich mir wünsche ist:

Bei einzeiligem Text:
-Bild links ausgerichtet.
-Text horizontal zentriert (in etwa)
-Bild und Text vertikal zentriert auf einer Höhe (!)

So hatte ich dich verstanden: Beispiel

Bei mehrzeiligem Text:
-Bild links ausgerichtet
-Text horizontal zentriert (in etwa)
-Text umfließt Bild in etwa wie bei float:left des Bildes

Das ist mit meinem Ansatz nicht zu erreichen. Ich denke, du möchtest das Ausschluss-Modell verwenden, aber das ist noch nicht so weit.

Matthias