Michael: Absolut positionierte DIVs zentrieren

Hallo!

Ich habe ein großes Problem das mich schon an den Rande der Verzweiflung getrieben hat.

Ich habe auf einer Seite einige DIVs absolut positioniert um sie um eine Grafik zu verteilen. So weit so gut. Jetzt will ich allerdings den ganzen Block auf der Seite zentrieren und hab das mittels einer Table und einer DIV probiert.

Bei der Table funktioniert die Zentrierung gar nicht und bei der DIV funktioniert sie nur soweit als dass ich den gesamten Block verschieben kann. Was aber auch bei der Verwendung von Prozentangaben bei unterschiedlichen Auflösungen keine Zentrierung bewirkt.

Wie kann ich den DIV-Block zentrieren.

Bitte helft mir bei meinem Problem.

Michael

  1. Moin!

    Grundsätzlich zentriert man Blocklevelelemnte per margin:auto.
    Weil der IE das gerne mal nicht versteht, bekommt das umgebende Element ein
    text-align:center verpasst.

    Da ich mir vorstellen könnte, dass sich das nicht mit deinen absoluten Positionierungen
    verträgt, kannst du dein Blocklevelelement auch zentrieren per

    div {margin-left: 50%; position:absolute; left:-[Breite des DIV:2];}

    Darin wiederum kannst du dann deine bereits vorhandenen Elemente wieder relativ positionieren. ;-)

    Gruß

    Der Hans

    --

    wieder online: http://www.discofoxtanzen.de
    1. Danke für deine Antwort - Die Lösung funktioniert sehr gut.

  2. Hi,

    Wie kann ich den DIV-Block zentrieren.

    hier eine Moeglichkeit, die auf neueren Browsern funktioniert. Wenn Du NC 4x beruecksichtigen willst, hilft nur Javascript.

    Gruesse  Joachim

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>

    <title>Div Layer zentriert</title>

    <style type="text/css">

    html, body {
     margin:0;
     width:100%;
     height:100%
    }

    #zentri {
     position:absolute;
     top:50%;
     left:50%;
     width:200px;
     height:300px;
     border:1px solid red;
     margin-top:-150px;
     margin-left:-100px
    }
    </style>
    </head>

    <body>
    <div id="zentri"></div>
    </body>
    </html>