Frage zur vertikalen Ausrichtung eines Anfängers, ...

[Jimmy]

... daher bitte um Nachsicht!

Ich möchte in der Mitte (horizontal) der Seite ein Bild haben und links und rechts davon Text der jeweils etwa mittig (vertikal) zum Bild erscheint.
Also so:

xxxxxxxxxxxxxxxxxx
                   xxxxxxxxxxxxxxxxxx
Text links         xxxxx Bild xxxxxxx     Text rechts
                   xxxxxxxxxxxxxxxxxx
                   xxxxxxxxxxxxxxxxxx

Versucht habe ich dies mit:

  
<div style="float:left; margin-top:5em; ">Text links<br>vom Bild</div>  
<div><img src="bild.gif" alt="">  
</div>  
<div style="float:right; ">Text rechts<br>vom Bild</div>  

Anstelle der margin-Angabe habe ich es auch mit padding versucht.
Beides führte zum gleichen Ergebnis, nämlich dass der Text links etwa in der Höhe passte, der Text rechts aber am unteren Rand des Bildes stand.
Mit einer margin- oder padding-Angabe rutscht dieser noch weiter nach unten.
Wie bekomme ich auch den rechten Text in (etwa) die Mitte des Bildes?

[Jimmy]

Natürlich soll nicht der Abfänger ausgerichtet werden, sondern die Frage kommt von einem Anfänger!

[momonster]

Natürlich soll nicht der Abfänger ausgerichtet werden, sondern die Frage kommt von einem Anfänger!

Spielverderber. Ich war gerade dabei, mir einen lustigen Text zu überlegen. ;-)

[Der Martin]

Hallo,

Natürlich soll nicht der Abfänger ausgerichtet werden, sondern die Frage kommt von einem Anfänger!

ach sooo ... ;-)

*scnr*
 Martin

[Jimmy]

ach sooo ... ;-)

Danke für die Hilfe!

[ScaraX]

Hi,

mir fallen spontan zwei Möglichkeiten ein, die allerdings in dieser Form in älteren Browsern nicht zu 100% funktionieren werden.

Entweder du Formatierst die drei divs als inline-block oder als table-cell. Dann kannst du sie mit vertical-align: middle ausrichten.

Genauere Anleitungen dazu solltest du bei Google genügend finden :)

MfG
ScaraX

[Jimmy]

Hi,

mir fallen spontan zwei Möglichkeiten ein, die allerdings in dieser Form in älteren Browsern nicht zu 100% funktionieren werden.

Das wundert mich, denn diese Darstellung, meine ich, hätte ich schon vor vielen Jahren gesehen. Wurde es damals mit Tabellen gemacht.
Wäre dies dann nicht auch jetzt sinnvoll?

Entweder du Formatierst die drei divs als inline-block oder als table-cell. Dann kannst du sie mit vertical-align: middle ausrichten.

Werde ich versuchen.

Genauere Anleitungen dazu solltest du bei Google genügend finden :)

Wenn man wüsste, wie man sucht, damit man nicht 125.000 Treffer erhält?

[Cheatah]

Hi,

Das wundert mich, denn diese Darstellung, meine ich, hätte ich schon vor vielen Jahren gesehen. Wurde es damals mit Tabellen gemacht.
Wäre dies dann nicht auch jetzt sinnvoll?

ja, Tabellenlayout wäre nicht auch jetzt sinnvoll.

display:table-cell existiert seit sehr langer Zeit. Das einzige Problem, das bei dessen korrekter Verwendung auftritt, ist der Umstand, dass sich dies erst in jüngster Zeit bis nach Redmond herum gesprochen hat - der IE beherrscht es erst ab Version 8.

Lösung: Normales Layout für normale Browser, und nur adäquates Layout für rotzendreckige MistvIEcher. Saubere CSS-Hacks existieren.

Cheatah