vertical-align:middle

[Ariane]

Hallo zusammen,

seit 90 Minuten versuche ich vergeblich "vertival-align" für eine Bild+Text Liste anzufertigen, leider ohne Erfolg. Hat jemand einen heißen Tipp für mich? ;)

<div style="position:relative; display:inline; height:86px;">
 <div class="bild" style="vertical-align:middle; height:84px; width:84px; border:1px solid #000; float:left; text-align:center;"><img src="bild_01.gif" width="60" height="40" alt="" border="0"></div>
 <div class="text" style="float:left; margin-left:15px; vertical-align:middle; height:84px;">Text zum Bild<br />und noch mehr Text zum Bild</div>
</div>

Vielen Dank für weiterführende Hilfe
Ari

[Alex]

Hallo Ari,

ich habe jetzt leider nicht die Möglichkeit hier etwas auszuprobieren,
aber display:inline und vertical-align vertragen sich normalerweise nicht.

Gruß,
Alex.

[Cheatah]

Hi,

aber display:inline und vertical-align vertragen sich normalerweise nicht.

display:inline ist neben display:table-cell das einzige, was vertical-align überhaupt verträgt. Bei display:inline wirkt diese Eigenschaft allerdings signifikant anders, als vom OP vermutet.

Cheatah

[Beat]

Ich vermute, du kannst das alles sehr viel einfacher machen.

Statt ein Bild in einem fest dimensionierten div auszurichten:

<div class="bild" style="vertical-align:middle; height:84px; width:84px; border:1px solid #000; float:left; text-align:center;"><img src="bild_01.gif" width="60" height="40" alt="" border="0"></div>

Einfach das Bild selbst geeigneter beschreiben:

  
<img class=bild  
     style="  
          display:block;  
          height:40px;  
          width:60px;  
          margin: 22px 12px; border:0;  
          "  
     alt="bildinfo"  

>  

mfg Beat

[Gunnar Bittersmann]

@@Ariane:

seit 90 Minuten versuche ich vergeblich "vertival-align" für eine Bild+Text Liste anzufertigen, leider ohne Erfolg. Hat jemand einen heißen Tipp für mich?

"2 Stunden ausprobieren können Ihnen 10 Minuten Handbuchlesen sparen." [ZITAT231]

[CSS2  §10.8]

Live long and prosper,
Gunnar

[Inita_]

hoi,

isch net so einfach, siehe mal Beispiele:

http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html

oder

http://innonesen.se/test/l-2/

LG

[Ariane]

hoi,

isch net so einfach, siehe mal Beispiele:

http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html

oder

http://innonesen.se/test/l-2/

LG

Hi Inita_,

Danke für den Link ;)

Lieben Gruß
Ariane