Sebastian: vertical-align: middle wird ignoriert!

Hallo liebe Forum'ler,

bin gereade ein bisschen am Verzweifeln.
Ich möchte in einer Textbox, die ansonsten nur <p>'s enthält, ein paar kleine Bilder zeigen, die einen jeweils erklärenden Text (nur wenige Worte) rechts daneben stehen haben. Da die Bilder größer sind als der Text, möchte ich der schönen Ansicht wegen diese textpassagen mittig zum jeweiligen Bild anordnen.

Das soll dann so aussehen:

bbbbbbb
bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb

bbbbbbb
bbbbbbb tttttttttt
bbbbbbb

usw.

Zunächst hatte ich ganz normale Textabsätze gemacht, in die ich die Bilder mit float:left; integriert habe.
Ging nicht, weil die Texte untereinander standen und die Bilder auch, aber die Texte nicht mehr zuzuordnen waren:

bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb
        tttttttttt
bbbbbbb
bbbbbbb
bbbbbbb

usw.

Dann habe ich aus jeder Text-Bild-Kombi ein <div> gemacht und habe vertical-align:middle; angegeben. Sa dann so aus:

<div style="height: auto; vertical-align: middle">
  <img src="xyz.gif" style="float: left;">
  Beispieltext
</div>

Jetzt sind die Texte zwar den Bildern zuzuordnen, aber es sieht immer noch so aus:

bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb

bbbbbbb tttttttttt
bbbbbbb
bbbbbbb

usw.

Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?

Für sachdienliche Hinweise dankt:
Sebastian

  1. Hi,

    <div style="height: auto; vertical-align: middle">
    Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?

    Das Element, auf das Du vertical-align anzuwenden versuchst, erfüllt nicht die dafür notwendigen Voraussetzungen.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo,

      Das Element, auf das Du vertical-align anzuwenden versuchst, erfüllt nicht die dafür notwendigen Voraussetzungen.

      Danke, soweit war ich auch schon. Aber wie zum Teufel kann denn dann das hier

      realisiert werden?

      Gruß -
      Sebastian

      1. Hallo Sebastian,

        Danke, soweit war ich auch schon. Aber wie zum Teufel kann denn dann das hier
        [ image:http://de.selfhtml.org/css/eigenschaften/ausrichtung.gif ]
        realisiert werden?

        Hiermit.

        Bis dann!

        Marc Reichelt || http://www.marcreichelt.de/

        --
        Linux is like a wigwam - no windows, no gates and an Apache inside!
        Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
        http://emmanuel.dammerer.at/selfcode.html
        1. Hallo Marc,

          Hiermit.

          danke für den Link! Leider schließen sich offenbar die Angaben float und vertical-align gegenseitig aus.
          Ich befürchte, dass ich für mein Problem nicht um eine Tabelle rumkomme.
          Fürs Protokoll: Er versuchte sich zu weigern, musste jedoch irgendwann darauf zurückgreifen!

          Gruß,
          Sebastian

          1. Moin!

            Fürs Protokoll: Er versuchte sich zu weigern, musste jedoch irgendwann darauf zurückgreifen!

            Das sähe ich nicht als so schrecklich an. HTML-Tabellen haben von Haus aus Eigenschaften, die allen anderen HTML-Elementen fehlen, insbesondere was die Textausrichtung angeht. Deshalb vertrete ich auch nicht die strenge Sicht, dass nur tabellarische Daten (wie Stundenpläne, Datenlisten etc.) als HTML-Tabelle ausgezeichnet werden dürfen, sondern dass es immer wieder notwendig sein kann, primär aus optischen Gründen auf Tabellen zurückzugreifen. Dein Anwendungsbeispiel ist so ein Fall.

            Rein theoretisch könnte man sämtliche existierenden HTML-Tags auch nur mit <div> und den passenden CSS-Werten erzeugen und so wirklich komplett auf Tabellen verzichten (siehe das zweite SELFHTML-Beispiel zu display). Real existierende Browser haben damit aber noch so ihre Probleme, d.h. da werden Eigenschaften von Elementen teilweise noch nicht oder nicht vollständig über das Browser-CSS zugewiesen, sondern durch interne Browserprogrammierung. Deshalb ist es mindestens zur Zeit noch unmöglich, auf jegliche Art von Tabelle zu verzichten (und das oben angeführte Beispiel ist auch alles andere als semantisch, sondern entspricht genau der ebenso heftig kritisierten DIV-Suppe, die man ebenfalls vermeiden sollte).

            Aber dass man nicht mehr fünf bis zehn Tabellen ineinander verschachteln muss, ist doch auch schon mal nett, oder? :)

            • Sven Rautenberg
  2. hi,

    Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?

    weil es das muss.

    vertical-align:
    Applies to:   inline-level and 'table-cell' elements

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo wahsaga,

      vertical-align:
      Applies to:   inline-level and 'table-cell' elements

      Aha. Und wie kann ich das Problem nun umsetzen? Ich wollte eben keine Tabelle nehmen von wegen pfui und so :-)

      Gruß -
      Sebastian