Tutorial: Einmitten

Inhalt

  1. Prinzip
  2. Quellcode
  3. Beispiel

Prinzip

Ein Element so einmitten dass es immer in der Mitte des Fensters erscheint. Es geht nur mit Elementen welche Konstant eine feste Grösse haben.

Man Positioniert es in der Mitte per position: absolute und schiebt es dann mit negativen margin In die korrekte Position.

Quellcode im Detail

  1. * {
  2. margin: 0px;
  3. padding:0px;
  5. img {
  6. position:absolute;
  7. left:50%;
  8. top:50%;
  9. width:468px;
  10. height:60px;
  11. margin-left:-234px; /* Margin welches halb so gross ist wie die Breite (width/2)*/
  12. margin-top:-30px;/* Margin welches halb so gross ist wie die Höhe (height/2)*/
  13. }

Beispiel

Das Beispiel des Einmitten einsehen

Dieser Code wurde erfolgreich getestet in folgenen Browsern: