✔ CSS anstelle Tabelle > vertical align?

[huelke]

Hallo.

Ich weis das es einige Tricks gibt um das vertikale Align per CSS zu erreichen...
Alle Tricks haben aber gemeinsam das man die Höhe des Blocks kennen muss.
Die hab ich aber nicht (Dynamischer Inhalt).

Was ich will (gaaanz Simpel):

<table cellspacing='0' cellpadding='0'>
   <tr>
      <td valign='center' width='100px'>Beschreibung:</td>
      <td>Dynamischer<br />ganz<br />langer<br />langer<br />langer<br />text</td>
   </tr>
</table>

Also eine ganz simple Tabelle mit "Beschreibung" davor wie man es ganz oft für Formulare braucht. Die Beschreibung ist dabei Vertikal zentriert, der "Dynamische" Text ist wie der Name sagt von variabeler Länge.
Nun will ich das aber mit Divs (und float) Regeln, da es so auch auf PDAs & Handys gut aussieht. Versucht mal das Browserfenster im Demo auf Handy-Bildschirm-Größe und ihr versteht was ich meine.

Hab das ganze erstmal mit Floats nachgebaut:

<ul style="list-style-type: none;margin:0px;padding:0px">
<li style="float: left;"><b>Beschreibung:</b></li>
<li style="float: left;">
Dynamischer<br />ganz<br />langer<br />langer<br />langer<br />text
</li>
</ul>

[DEMO]

Allerdings ist so noch nicht der Vertikal-Center Part erledigt...

Ich stehe auf dem Schlauch: Gebt mir bitttte tipps

Vielen Dank
huelke

 

[Maik]

Hi.

Ich weis das es einige Tricks gibt um das vertikale Align per CSS zu erreichen...
Alle Tricks haben aber gemeinsam das man die Höhe des Blocks kennen muss.

Dann kennst du noch nicht die Technik für die standardkonformen Browser bzw. alle Tricks für den IE, denn in den folgenden Beispielen ist die Höhe des Blockes, der vertikal zentriert werden soll, überhaupt nicht bekannt:

• http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
• http://www.pmob.co.uk/temp/vertical-align11.htm