Christian Seiler: valign als CSS Eigenschaft ?

Beitrag lesen

Hallo Hanno,

Das vertical-align läuft bei mir irgendwie nicht. ICh hab da
folgendes Beispiel:
         .center{
[...]
            vertical-align: middle;
         }
[...]
      <div class="center">

Zum einen: vertical-align darf man nicht bei Blockelementen verwenden. Hat einfach keine Wirkung. <div> ist ein Blockelement.

Zum anderen:

Bei Inlineelementen wirkt sich vertical-align so aus:

+----------------------------------------------------------------------------------+
| *     *         *  *                               +------------+                |
| *     *         *  *                               | Inline-Box |                |
| *     *         *  *                               +------------+                |
| *******  ****   *  *    ******     +-------------+                               |
| *     * *    *  *  *   *    *      | Inline-Box  |                               |
| *     * *    *  *  *   *    *      +-------------+                               |
| *     *  ****** ** **   ****                                      +------------+ |
|                                                                   | Inline-Box | |
|                                                                   +------------+ |
+----------------------------------------------------------------------------------+

Der ganze Kasten soll eine "Zeilenbox" darstellen, die von Text erzeugt wird. Irgendwelche Boxen, die von Inlineelementen erzeugt werden, werden dann zu dieser Zeilenbox ausgerichtet. Die erste Inlinebox hat vertical-align: middle;, die zweite vertical-align: top; und die dritte vertical-align: bottom; Eine Zeilenbox wird von einem Blockelement "oben" erzeugt.

Einzig bei Tabellenzellen wirkt sich vertical-align so aus, wie Du es willst.

Viele Grüße,
Christian