Bild vertikal über Bildschirm zentrieren

[strauberry]

Hallo zusammen,

hab jetzt ewig gesucht, wie man das macht... hier eine kleine Anleitung:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td align="center" valign="middle"><img src="bild.jpg" style="vertical-align: middle;" />
</td>
  </tr>
</table>

WICHTIG: Wer seine Datei mit DW erstellt hat, muss den ganzen Bullshit oben über dem html-Tag rausschmeißen!! Sonst funktioniert das hier nicht.

Hoffe, es hilft euch weiter.

strauberry

[rewboss]

Naja, das ist ein alter Trick, aber leider nicht vorwärtskompatibel. "Der ganze Bullshit" vor dem HTML-Tag enthält einen <!DOCTYPE>-Tag, der für die Validierung als XHTML notwendig ist. Es gibt keine Garantie, dass ein künftiger Browser das Attribute height im <td>-Tag erkennt. Viele ältere Browser haben das auch nicht getan.

Wenn es nur ein Bild sein soll, kann man es statt dessen mit CSS als Hintergrundbild definieren und mit background-position:50% 50% genau in der Mitte platzieren. Oder im Vordergrund soll es ungefähr so gehen:

<style>
.vertikalzentriert{
 position: absolute;
 top: 0;
 margin-top: auto;
 margin-bottom: auto;
}
</style>

<!-- Funktioniert aber nicht im IE/Win, also bräuchten wir dies noch
-->

<!--[if lte IE 6]>
<style>
.vertikalzentriert{
 top: 50%;
 margin-top: -25%;
}
</style>
<![endif]-->