div sowohl horizontal als auch vertikal zentrieren

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich möchte einen DIV in der Mitte des Fensters haben, also horizontal und vertikal zentrieren.
Vertikal ist es bereits schon zentriert, allerdings bekomme ich es nicht für die Horizontale hin.

CSS zum DIV „inhalt“:
#inhalt {
text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 500px;s
border: 1px dashed #564b47;
margin-top:100px;
}

Wäre schon, wenn mir da jemand helfen könnte.
Sicherlich habe ich das Forum nach einem Lösungsweg durchsucht, allerdings habe ich keinen gefunden, der auch da tut was er soll.

Schönen Sonntag und 'n Dank im Vorraus.

2

Zum einen würde ich nur

margin:auto;

verwenden. Außerdem hast du da ein „s“ hinter deinem width-Attribut stehen, das würde ich mal rausnehmen.

Dann muss man dazu fragen, in welchem Browser du das CSS so getestet hast. Der IE macht bekanntlich zicken mit margin:auto;

Das lässt sich aber auch ganz einfach beheben, indem du eine Ausnahme für den IE reinknallst.

* html body { text-align:center; }

So wird der Div-Container auch im IE zentriert angezeigt.

3

Opera. In Verbindung mit Dreamweaver ist das am leichtesten. Aber einen Browservergleich möchte ich jetzt nicht ankurbeln. Nur so nebenbei möchte ich erwähnen, dass ich Firefox meide und die Seite dafür auch nicht optimieren werde.

Aber ich habe mal ein wenig nachgedacht und habe eine sehr gute Lösung gefunden, mit der auch alle Browser klar kommen.

#inhalt {

background: #131313;
color: #FFFFFF;
width: 500px;
height: 400px;
margin-top: -200px;
margin-left: -250px;
top: 50%;
left: 50%;
position: absolute;

}

→ Thema erledigt.

4

horizontal:

position:absolute;
top:50%;
margin:0 auto;
margin-top: - hoehe / 2;

Du gibst ihm nen top-wert von 50% und anschließend bei margin-top die hälfte der höhe des elements als negativen wert.

EDIT: zu lange gebraucht.^^

5

Firefox meiden. Da haste dir grad keinen Freund gemacht :wink:

Naja is ja auch wurst. Die Lösungen wie ihr sie gepostet habt finde ich interessant und habe sie bis jetzt in der Form noch nicht gesehen. Werde ich mir auf jeden Fall mal merken.

6

Hier mal ein kleiner Ausschnitt aus einer meiner Analytics Seiten 73% Mozilla Firefox 20% Microsoft Internet Explorer 5% Safari 2% andere Browser. Überleg dir das nochmal mit dem nicht optimieren für Firefox.

7

Weil ich es gestern zufällig gefunden habe und nicht wusste, dass es beim W3C sowas gibt: CSS: centering things
Speziell: Example of vertical centering

Ich würde aber nicht drauf wetten, dass das in allen Browsern funktioniert. Ich meine, das ist das W3C.

8

Würde man die Welt im Thema Sicherheit und Firefox aufklären würde das nicht so sein.