|
|||
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;"> Danke und Gruss, Roli |
Sponsored Links |
|
|||
Moin,
Code:
<div style="margin:0 auto 0 auto;">horizontal zentriert</div> 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> 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;"> 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>
__________________
</ulle> |
|
|||
Zitat:
|
|
|||
__________________
</ulle> |
Sponsored Links |
|
|||
Lösung!!!
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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div in div vertikal zentrieren | kostonstyle | CSS | 0 | 18.06.2011 18:23 |
CSS-Seite horizontal und vertikal zentrieren! | Boof | CSS | 20 | 05.02.2010 13:23 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Vertikal zentrieren in Box | wandler | CSS | 5 | 01.08.2006 20:01 |
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE | AndreasB | CSS | 11 | 13.03.2006 18:05 |