Dave: Text/Bild wird nicht vertikal zentriert :(

Hi,

ich versuche mit CSS ein Bild und einen Text vertikal zu zentrieren (vertikal = Senkrecht, wenn ich mich nicht irre lol).

<div style="vertical-align:middle; height:20px;">
<img src="design/lang_de.png" width="22" height="16"> Jetzt downloaden</div>

So... da ist das Bild und daneben der Text... beides habe ich versucht im DIV mittig zu zentrieren... klappt aber nicht.

Kann mir jemand sagen, warum?

Grüsse
Dave

  1. Hallo Dave !

    Falls ich dich richtig verstehe, möchtest du das ganze mitten auf dem Bildschirm positionieren. Dann schau doch erst mal bei SELFHTML nach. Da steht es bei'm FAQ ganz genau:

    <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    <tr><td align="center" valign="middel"><img src="design/lang_de.png" width="22" height="16"> Jetzt downloaden</td></tr>
    </table>

    Tipp: Erst denken, dann schreiben ;)

    benji

    1. Hi benji,
      hier geht es um CSS und nicht um HTML-Attribute und um vertikale Ausrichtung in einem Block-Element und nicht in einem table-cell Element. Also:

      Tipp: Erst denken, dann schreiben ;)

      benji

      --------------

      Hi Dave,
      das dürfte so eigentlich immer noch nicht funktionieren, wenn du Text und Grafik innerhalb des div-Containers ausrichten möchtest.
      vertical-align richtet Inline-Boxen vertikal in einer Zeilenbox aus. Die Höhe der Zeilenbox erstreckt sich von der Oberkante des obersten Elements zur Unterkant des untersten Elements. In diesem Fall wäre dass die Höhe der Grafik. Der div-Container hat damit nichts zu tun.
      Weiterhin wird die Höhe einer Zeilenbox durch line-height beeinflußt. Gibst du diese im div-Container an, wird sie an die Zeilenbox vererbt und die Inhalte vertikal ausgerichtet.
      Leider funktioniert dies nicht im IE.
      Du kannst aber für die Grafik auch einen Außenabstand mit margin angeben. Das beeinflusst ebenfalls die Zeilenhöhe und funktioniert auch mit dem IE.

      Gruß
      Thomas

  2. Hi Dave,

    <div style="vertical-align:middle; height:20px;">
    <img src="design/lang_de.png" width="22" height="16" align="middle"> Jetzt downloaden</div>

    So sollte es gehen...

    Gruß Gunther

    1. Hi Dave,

      hier noch eine kurze Erklärung.
      Bei dem Div-Element handelt es sich um ein Block-Element. Diesem weist du nun bestimmte Formatierungen zu (z.B. vertical-align:middle). Diese greifen auch für alle Elemente innerhalb dieses Blockelementes für die _keine_ andere Format-Anweisung definiert wurde. Das ist aber bei dir der Fall, nämlich durch das Image-Tag, welches ein Inline-Element ist, und somit eine Formatierung für den Rest der Zeile (also z.B. dein anschließender Text), in der es steht, vornimmt. Und der Default-Wert für align ist "baseline".

      Deshalb musst du im Image-Tag zusätzlich einen Wert für align angeben. Wäre dein Text in einer neuen Zeile (immernoch innerhalb des DIV-Bereiches), käme wieder die Formatierung des Block-Elementes (also vom DIV) zum Tragen.

      Gruß Gunther