XHTMLforum - Vertikal zentrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Vertikal zentrieren (http://xhtmlforum.de/showthread.php?t=31961)

Vertikal zentrieren

Hallo allerseits

Ich habe eine div-Box. Diese ist, wie in einem Beispiel auf CSS4YOU 760px breit. Nun möchte ich aber die Höhe zusätzlich mit "height" bestimmen und das ganze vertikal zentrieren.

Habe es mit "margin:auto" versucht und mit "margin-top:" und "-bottom" herumgespielt, das geht aber nicht (IE 6). Hier das CSS:

Code:

<div style="width:760px;height:530px;margin:auto;text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">

Wie mache ich dass, das der Browser die Box immer zentriert anzeigt (vertikal und horizontal)?

Danke und Gruss,

Roli

Es soll ja eigentlich mit "margin: auto auto" gehen, aber der IE verarbeitet besondere CSS-Eigenschaften nicht, andere Browser hingegen schon.

Moin,

Code:

<div style="margin:0 auto 0 auto;">horizontal zentriert</div>

bin mir jetzt nicht sicher in welchen Browsern das funktioniert, bin da aber zuversichtlich :)
Sonst probier mal ein bisschen mit prozenten rum.

Code:

<div style="margin-left:30%; margin-right:30%; width:40%">hoffentlich horizontal zentriert</div>

<div style="margin-top:40%; margin-bottom:40%; width:20%">hoffentlich vertical zentriert</div>

MfG
Edit: BBCode aktiviert und Smilies deaktiviert.

Hi rusty,
vertikal zentrieren kannst du es z.B. mit absoluter Positionierung.
Positioniere den Container mit left:50% und top:50%; in die Seitenmitte und verschiebe ihn mit negativen margin um die halbe Höhe nach oben und um die halbe Breite nach links.

Code:

<div style="position:absolute;left:50%;top:50%;

width:760px;height:530px;margin-left:-380px;margin-top:-265px;

text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">

Gruß
Thomas

Als Verfechter der relativen Breite biete ich eine entsprechende Lösung:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>test</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<style type="text/css">        <!--

        html,body {

                background-color: #FF9933; 

                color: #000000;

                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

                font-size: 0.9em;

                margin: 0px;

                padding: 0px;

                overflow: auto;        

                height: 100%;        

        }



        div {

                position:absolute;

                left:15%;

                top:15%; 

                width:70%;

                height:70%;

                background-color:#FFFFFF;

                border:1px solid #bdbec6;

                overflow: auto;

        }

        -->

</style>

</head>



<body>



<div>&</div> 



</body></html>

Zitat:

Zitat von Thomas (css 4 you)

Code:

<div style="position:absolute;left:50%;top:50%;

width:760px;height:530px;margin-left:-380px;margin-top:-265px;

text-align:left;background-color:#ffffff;border:1px dotted #bdbec6;">

Gruß
Thomas

Servus alle zusammen. Bin neu hier und bin auf das Beispiel gestoßen. Läuft super, aber nicht unter IE, sowohl am PC als auch am Mac. Safari, Firefox und Camino kommen super zurecht. Gibt es da auch einen Trick, wie man es auch für IE anpassen kann?

Zitat:

Zitat von Thomas (css 4 you)

Da ist mir eine Sache zu erst heute aufgefallen: Wenn man dann die Auflösung soweit runter fährt, dass sie unter der width Angabe liegt, dann rutscht das Fenster links raus. Wollte nur sagen, dass das zu beachten gilt. Momentan noch zu betrachten unter www.lippert-webdesign.de Mache mir gerade Gedanken darüber wie man das am besten löst...

Gibt´s den wirklich niemanden hier? :cry:

Hey Leute!
Ich hab die Lösung!!! Funktioniert im aktuelle IE und Firefox!

Und zwar ist die ganze Sache bei mir noch etwas komplizierter. Ich habe ein großes Foto als Gesamthintergrund der Seite, dass auch hor / vert zentriert sein soll. Darüber liegt dann noch ein Layer, das auch mittig zentriert ist.

Ich denke damit ist die Problematik des vert Zentreirens gelöst. Allerdings ist Voraussetzung, dass man die Höhe des oberen Layers kennt.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>aaa</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<style type="text/css">

<!--

#horizon {

position: absolute;

top: 50%;

left: 0px;

width: 100%;

margin-top: -290px;

text-align: center;

min-width: 1000px;

}

#wrapper {

        background-color: #fff;

        position: relative;

        text-align: left;

        width: 1000px;

        height: 580px;

        margin: 0px auto;

        background-image: url(Bilder/sanandres_03.jpg);

        background-repeat: no-repeat;

        background-position: center center;

}

body {

        background-image: url(sanandres.jpg);

        background-position: center center;

        min-height: 580px;

        background-attachment: fixed;

        background-repeat: no-repeat;

}





-->

</style>

</head>

<body>



<div id="horizon">

<div id="wrapper">

<div id="content">



test



</div>

</div>

</div>



</body>

</html>