Thomas Luethi: Bild in der mitte eines divs platzerien

Beitrag lesen

Hallo,

Den Ansatz findest Du hier:
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

Hintergrundinfos zur Positionierung mit CSS findest Du hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Die Höhe des Bildes ist ja wohl bekannt und immer gleich?
Dann kannst Du die linke obere Ecke zuerst genau in der
Mitte des DIVs positionieren  - top:50%; left:50%; -
und dann noch um die halbe Breite nach links und um
die halbe Höhe nach oben verschieben.

Beispiel: Das Bild ist 400px breit und 300px hoch:

HTML:

<div id="spezial">  
  <img id="zentriert" alt="ALT-Text">  
</div>

CSS:

div#spezial  
 { position:relative; /* notwendig, damit sich das  
                         position:absolute beim Bild  
                         auf den DIV bezieht */  
  /* ... weitere Angaben wie Hintergrundbild u.s.w.*/  
}  
  
img#zentriert {  
  position:absolute;  
  top:50%;  
  left:50%;  
  width:400px;  
  height:300px;  
  margin-left:-200px;  
  margin-top:-150px;  
}

HTH, mfg
Thomas