|
|||
horizontal und vertikal zentrieren
In der Rubrik Knowledge Base hatten wir das Thema schon. Jetzt habe ich friccas Methode genommen und in den mittigen Container noch 4 divs gepackt. 2 sollen oben und die anderen 2 unten zentriert werden.
Wenn ich bei den Boxen das float: left rausnehme, zentriert er es mir zwar auch, aber stellt alle Boxen untereinander dar. Wenn ich float: left reinnehme, stellt er mir 2 Boxen oben und 2 Boxen unten dar, aber nicht mehr zentriert. Wie kann ich das jetzt so hinbekommen, dass die trotzdem zentriert werden? Und auch das h1 in der Mitte beim IE? Im Firefox stellt er mir die h1 zentriert da, im IE nicht... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSS vertical center using float and clear</title> <style type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; } body { color: #630; font: 100.01%/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; background: #fc6; } #distance { width: 1px; height: 50%; margin-bottom: -235px; float: left; } #container { position: relative; text-align: center; height: 470px; width: 100%; clear: left; margin: 0 auto; } h1 { font-size: 120%; text-align: center; } #box1, #box2, #box3, #box4 { overflow: hidden; position: relative; border: 10px solid #fff; height: 200px; width: 44%; color: #fff; margin: 1%; float: left; } #box1[id], #box2[id], #box3[id], #box4[id] { display: table; position: static; text-align: center; } #middle { position: absolute; top: 50%; } /* für den IE */ #middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { text-align: center; position: relative; top: -50%; } /* für den IE */ /* optional: #inner[id] {position: static;} */ #box1 { background-color: #D92C80; } #box2 { background-color: #00A0E3; } #box3 { background-color: #FFE96B; } #box4 { background-color: #2B7C33; } </style> <style type="text/css">@import("iemac-center.css");</style> </head> <body> <div id="distance"></div> <div id="container"> <div id="box1"> <div id="middle"> <div id="inner"> <h1>Box 1</h1> </div> </div> </div> <div id="box2"> <div id="middle"> <div id="inner"> <h1>Box 2</h1> </div> </div> </div> <div id="box3"> <div id="middle"> <div id="inner"> <h1>Box 3</h1> </div> </div> </div> <div id="box4"> <div id="middle"> <div id="inner"> <h1>Box 4</h1> </div> </div> </div> </div> </body> </html> |
Sponsored Links |
|
|||
Re: horizontal und vertikal zentrieren
Zitat:
Ev. tust du dich leichter, wenn du nur jeweils die linke Box floatest und der rechten einen entsprechenden margin-left gibst. Probleme mit dem IE wirst du IMHO so oder so haben Zitat:
Wenn du deinen diversen verschachtelten Elementen mal unterschiedliche Hintergrundfarben gibst, dann siehst du, wo das Problem liegt.... Grüße fricca |
Sponsored Links |
|
|||
Der umschließende Container ist ja schon zentriert... Aber ich will es ja dynamsich haben und nicht statisch. Also müsste der Container schon 100% haben, aber ich habe es ausprobiert, selbst bei einer festen Breite zentriert er es nicht, aber der Tipp mit dem left: 0 und width: 100% war goldrichtig, hätte ich ja auch gleich drauf kommen können...
|
|
|||
Zitat:
Was sollte da noch zentriert sein? Zitat:
Elemente mit float:left sind immer so weit links wie möglich, da gibt's kein "zentrieren". Da musst du dann schon entsprechende margins vergeben (box1 und 3) |
|
|||
Also bei mir steht im umschließenden Container:
Code:
#container { position: relative; text-align: center; height: 470px; width: 100%; clear: left; margin: 0 auto; } |
|
|||
Zitat:
ein 100% breiter Container kann nicht mehr zentriert werden. Und text-align:center zentriert Text (und inline-Elemente) innerhalb eines Containers - keine Blockelemente. Lass width:100% weg (bzw nimm einen passenden %-Wert) und setz Werte für margin-left/-right. Dann hast du deine Zentrierung. Du musst dann deine Box-Breiten noch anpassen. |
|
|||
Ich habe für die Geschichte aber weniger CODE, oder habe ich es nicht verstanden. Schau es Dir mal an.
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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; html, body { color: #000000; background: #EEEEEE; line-height: 1.45; height : 100%; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #viewport50 { /* [float] verhindert * negatives verrutschen des #container * aus denm Viewport */ float:left; display: block; height:50%; width:1px; /*halbe Hoehe von #container */ margin-bottom: -15em; background-color:red; } #container { clear:left; /* halbe Hoehe negativer [margin-bottom] im #viewport50 */ min-height: 30em; height: auto ! important; height: 30em; width: 90%; margin: 0 auto; background-color:yellow; } #container span { float: left; width: 47%; height: 14em; margin: .5em 1.34%; background-color: #2299FF; } h1 { text-align: center; } /*]]>*/ </style> </head><body> <div id="viewport50"></div> <div id="container"> <span> <h1>h1 - text</h1> ...hier noch ein wenig Text </span> <span> <h1>h1 - text</h1> </span> <span> <h1>h1 - text</h1> </span> <span> <h1>h1 - text</h1> </span> </div> </body></html>
__________________
</ulle> |
|
|||
@ulle
*hüstel* h1 innerhalb von span? Die h1 sind innerhalb ihrer Boxen bei dir nicht vertikal zentriert - das ist aber IMHO, was der OP wollte. Da bräuchte es ein line-height - und dann ist's vorbei mit mehrzeiligen Texten... Grüße fricca |
Sponsored Links |
|
|||
Zitat:
H1 sollte auch vertivcal zentriert werden (!?) Okay dann sollte wohl noch mehr Hirnschmals in den CODE
__________________
</ulle> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11: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 |
Div-Box vertikal und horizontal mittig zentrieren | Retrax | CSS | 1 | 30.05.2006 23:02 |
Bild horizontal und vertikal zentrieren | Anonymous | CSS | 10 | 18.06.2003 12:20 |