Hi Palme,
erstmal vielen Dank für Deine ausführliche Antwort.
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.
Ja, exakt was ich auch im Hinterkopf hatte :))) .... bloß auf span bin ich nicht gekommen!
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.
Ich hab noch ein Lösung gefunden, die zwar nicht ganz sauber ist, aber zumindest funktioniert:
<div style="
width:800px;
height:600px;
position:absolute;
left:50%;
margin-left:-400px; //Hälfte der Breite des divs
top:50%;
margin-top:-300px; //Analag halbe Höhe
">
<!== hier absolut mittigiger Bereich -->
</div>
Sauber ist sie deshalb nicht, weil sie bei einer Fenstergröße des Browser, die kleiner als 800x600 ist, linken und oberen Teil des div-Inhalt verschluckt.
Hi,
deshalb habe ich es dir auch auf die andere Art und Weise vorgeschlagen, denn wenn du deine Auflösung änderst, egal ob größer oder kleiner, so verschiebt sich dein Bild.
Daran solltest du vor allem deshalb denken, da nicht jeder der auf deine Homepage kommt, die gleiche Auflösung hat wie du -beim Testen der Seiten.
MfG
Palme