OXPUS.de

Hallo und ein Frohes Neues Jahr.

Ich Probiere gerade das DIv immer mittig zu setzten egal bei welcher Auflösung. Das DIV ist immer Links und ich bekomme es wenn überhaubt nur im Firefox mittig :/

kann mir da jemand weiter helfen

?

HTML

Code: Alles auswählen

<div class="box"> 
<b class="top"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b> 
<h1>oben</h1>
<p>ein Text</p> 
<b class="bottom"> <b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b> </b>
</div>

CSS

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA;} 
.box h1, .box p {margin: 0 10px;} 
.box h1 {font-size:150%; color:#ffffff; } 
.box .top, .box .bottom{display:block;background: #ffffff;} 
.box .top b, .box .bottom b { display:block;height: 1px; overflow: hidden; background: #9BD1FA; } 
.box .r1{margin: 0 5px;} 
.box .r2{margin: 0 3px;} 
.box .r3{margin: 0 2px;} 
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

Füge mal for die Style-Anweisungen für die erste .box diese Zeile ein:

Code: Alles auswählen

div { margin: auto; }

Dann würden alle div-Elemente horizontal zentriert werden.
Alternativ kannst Du das auch in die Zeile

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA; }

einbauen, also dann so:

Code: Alles auswählen

.box { width: 900px; background: #9BD1FA; margin: auto;}

Soviel dann zum Thema Firefox und ähnlichen Browsern

Für den IE muss man hier schon mehr machen!
Hierfür würde die Zeile so ausschauen müssen:

Code: Alles auswählen

.box { background: #9BD1FA; position: absolute; width: 900px; left: 50%; margin-left: -450px; }

Wäre auch korrekter, denn nun zeigt jeder Browser den Block zentriert an.

Danke

OXPUS.de

Wie bekomme ich DIV in die Mitte ?

Wie bekomme ich DIV in die Mitte ?