HTML Tipp: <div style=”vertical-align:middle”> geht nicht… oder doch?
Wie oft sucht man nach <div style=”vertical-align:middle> und findet immer nur die gleiche Antwort: es funktioniert nicht, funktionierte noch nie und wird wohl so schnell auch nicht funktionieren. Soweit die ernüchternde erste Antwort.
Wozu braucht man überhaupt einen mittigen Schriftzug? Gerade im “Ajax-Zeitalter”, wo die animierten Loading Bilder überall auftauchen möchte man doch ab und an auch den Text – “Loading..” mittig neben dem Bild haben und beide Elemente (Bild und Text) mittig im darum liegenden Block-Element. Aus diesem Grund wird oft das div Element verwendet um Bild und Text gemeinsam auszurichten. Oft läuft der erste Versuch dann folgendermaßen ab:
Loading…<div style="vertical-align:middle;"> <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading... </div>
Diese Herangehensweise funktioniert nicht, weil vertical-align nur auf die Höhe einer Zeile reagiert und nicht auf die Höhe eines umliegenden Block Elements.
Aber was tun? Selbst habe ich auch oft genug danach gegoogelt, mir Lösungen angeschaut und Erläuterungen entgegengenommen die mir sagen, dass es nur mit einer Tabelle funktioniert. Heißt es also wenn ich einen Text mittig neben einem Bild ausrichten möchte muss ich eine Tabelle nehmen? Das würde dann wie folgt aussehen:
|
Loading… |
<table style="height: 40px;"> <tr> <td style="vertical-align: middle; width: 25px;"> <img src="http://www.webthreads.de/.../ajax-loader.gif"/> </td> <td style="vertical-align: middle;"> Loading… </td> </tr> </table>
Sieht ja grundsätztlich im Ergebnis schonmal nicht schlecht aus. Die Frage ist ob man dafür immer eine Tabelle verwenden soll bzw. muss:
Wenn man darüber nachdenkt, dann kann man doch ein Block Element nehmen welches auf die Zeilenhöhe reagiert, wie z.b. das <p> Element. D.h. man erstellt ein solches Element, mit einer angegebenen festen Zeilenhöhe und sagt, dass es sich mittig ausrichten soll:
Loading…
<p style="vertical-align:middle;"> <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading... </p>
Das kann natürlich nicht funktionieren weil sich die CSS Angabe vertical-align:middle auf den Text einer Zeile bezogen auf das Eltern Element auswirkt, welches wiederum ein Inline-Element sein muss. Dabei orientiert sich die Zeile an der größten Box die die Zeile enthält. Das heißt, hat man mehrere Inline-Elemente nebeneinander und sie orientieren sich mit der Basislinie an dem größten Element, dann erstellt man einfach zwei separate Inline-Elemente, setzt bei einem die Schriftgröße zum ausrichten und orientieren für die anderen Boxen. Siehe dazu auch in der W3C CSS Level 2 Beschreibung zu der Eigenschaft “vertical-align:middle” (deutsche Übersetzung).
Folgende Variante funktioniert somit um einen Text neben einer Grafik mittig auszurichten:
Loading…
<p style="padding:0;margin:0;"> <span style="vertical-align:middle; font-size:40px;"> <img src='http://www.webthreads.de/.../ajax-loader.gif'/> </span> <span style="vertical-align:middle">Loading...</span> </p>
Vor allem wichtig ist die Angabe font-size in einem Inline-Element denn diese erstellt die entsprechende Zeilenhöhe an der sich die weiteren Boxen (span Elemente) ausrichten. Am einfachsten ist es diese Angabe entweder in einer leeren Box anzugeben oder bei einer Box, wie hier bei dem Bild, bei der es nicht weiter stört. Zur weiteren Verschönerung kann man die default padding und margin CSS Eigenschaften des p Elementes noch außer Gefecht setzen.
Ob diese Lösung eine gute, eine einfache oder eine bessere Lösung als die Tabellen-Lösung ist, dass darf jeder selbst entscheiden. Falls einer eine weitere Möglichkeit für das mittige Ausrichten eines Textes neben einem Bild hat so darf er sie hier gerne kund tun – bin sehr gespannt darauf.
(Für das Erstellen des animierten Loading Bildes wurde ajaxload.info verwendet.)
![](http://www.webthreads.de/…/ajax-loader.gif"){kind=link}