vertical-align nur für Tabellen?

[Længlich]

Rena-voítse!

Ich habe gerade eine Möglichkeit für IE7 ohne expression gefunden! Sie setzt aber voraus, daß das innere Element nicht ganz so breit ist wie das äußere.

<span><span>Text mit<br /> mehreren Zeilen</span>&nbsp;</span>

span  
{  
  display:block;  
  height:10em;  
  line-height:10em;  
}  
span span  
{  
  display:inline-block;  
  line-height:normal;  
  vertical-align:middle;  
}  

Anmerkungen:
• Alles nur für IE7; die anderen Browser bekommen nach wie vor die table-cell-Variante.
• Ich hoffe, das läßt sich so auf andere Elemente übertragen, z.B. auch body und ein div, habe das aber nicht getestet.
• Wenn statt des inneren spans ein Block-Element verwendet wird, muß display nochmal auf inline gesetzt werden (inline-block funktioniert ja strenggenommen im IE7 gar nicht richtig, sondern setzt nur hasLayout).
• Man beachte den  ! Ohne den klappt es nicht, und das innere Element bleibt oben. (Beliebiger anderer Text geht auch.)
• Dieser No-Break Space ist auch der Grund, warum das innere Element nicht so breit sein darf wie das äußere. Wenn er nicht mehr hinpaßt, bleibt das innere Element auch wieder oben. Overflow:visible oder hidden hat nicht geholfen.

• den ollen Partykiller IE 6/7 einfach ignorieren.

Jetzt ist IE 6 der letzte Partykiller. :-)

Viele Grüße vom Længlich