Hallo Leute,

ich möchte (ohne den Einsatz von Tabellen) ein Block-Element (800x600) so positionieren, daß es zu allen Seiten den gleichen Abstand hat!

Die horizontale mittige Ausrichtung klappt mittels

<!-- workaround für IE -->
<div style="text-align:center; vertical-align:middle;">

<!-- bitte nicht an position:relative stören -->
  <div style="margin-left:auto; margin-right: auto; margin-top: auto; margin-bottom: auto; position: relative; width:800px; height: 600px; border:1px solid #FF0000;">

<img src="asdf" alt="" />

</div>

</div>

• vertical-align bringt aber nichts
• genausowenig auto für margin-top und -bottom
• auch position:absolute; left:50%; right:50%; top:50%; bottom:50%; bringt nicht

Welche Lösungen gibt es also, um die vertikale mittige Ausrichtung zu erzwingen!

Hallo Martin,

vertical-align richtet nur nebeneinanderstehende Elemente oder Texte in einer Zeile im Verhältnis zueinander aus, du kannst vertical-align also i.d.R. nicht dazu benutzen um ein "<div>" in einem "<div>" horizontal auszurichten.

siehe auch:

http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align

Du kannst aber einen kleinen, na ja nennen wir es mal vorsichtig: Trick, benutzen, indem du deinen Quelltext so umschreibst:

<div style="text-align:center; vertical-align:middle;">

<span style="position: relative; width:800px;
                       height: 600px; border:1px solid #FF0000;">

<span style="position: relative; left:0px;
                         width:0px; height:100%;
                         border:1px solid #FFffff;
                         vertical-align:middle;">
     </span>

<img src="asdf" alt=""
                          style="vertical-align:middle;"/>
  </span>
</div>

Du erzeugst also 2 nebeneinanderliegende "<span>" und richtest diese vertical mittig zueinander aus, so kommt das Bild in die Mitte, vorausgesetzt, dass das "1. <span>" die gleiche Höhe hat wie dein äußerer Rahmen (bzw. <div>).
Margin-left und Co. kannst du i.d.R. weglassen, ergibt sich ja eh "auto"matisch.

Mag sein, dass es noch andere Lösungen gibt, aber momentan von meiner Seite her nicht.

MfG

Palme