✔ Zentrieren von div-Elementen

[goodfella]

Hallo an Alle,
ich hab da mal eine wahrscheinlich relativ simple Frage an euch, und zwar: Wie zentriere ich div-Elemente in einer externen CSS-Datei?
Ich weiß, dass ich im HTML-Script mit center zentrieren kann aber das geht ja nicht in der css-Datei.
Mit margin könnte ich das div-Element natürlich auch manuell zentrieren, wenn ich dann aber das Fenster minimiere, ist das div-Element nicht mehr zentriert! Wie kann ich das machen?
Danke schonmal im Vorraus!
Goodfella

 

[son gohan]

Hallo,

am besten nimmst du einfach ein extra div Tag mit algin="center" Befehl und machst es um das eigentliche div Tag das du mittit haben willst.

Wenn du nämlich in deiner externen CSS Datei einfach nur für das entsprechende div Tag schrebien tust text-align:center; dann wird nur der Text mittig ausgerichtet, aber nicht das ganze div Tag.

Du hast natürlich auch die Möglichkeit mit position absolute ein Tag so auszurichten auf der Seite wie du willst, auf den Pixel genau, aber wenn du damit eine dib Tag versucht mittig auszurichten wird es wohl nie richtig klappen.

Die beste Möglichkeit also wie gesagt einfach ein div Tag ohne weitere CSS Eigenschaften nur mit dem align="center" um das zu zentrierende div Tag schmeisen und dann klappt das auch eigentlich immer und überall.

Ein sehr uter Tipp von mir: mache erst mal über jedem div Tag ein border damit du dich besser orientieren kannst und immer direkt sehen kannst wie sich das Tag bewegt auf deine CSS Befehle. ( Bitte sag mir jetzt niemand das CSS keine Befehle hat, Deutsche Sprache schwere Sprache )

 

[Maik]

Hier eine elegantere (CSS) Lösung, die kein zweites DIV-Element (= Elternelement) mit dem Attribut align='center' bzw. style='text-align:center;' benötigt und sich in einem zentralen Style-Sheet (im HEAD oder als CSS-Datei) realisieren lässt:

#centeredDiv
{
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px; /* negative Hälfte von width: 500px */
top: 50%;
height: 300px;
margin-top: -150px; /* negative Hälfte von height: 300px */
border: 1px solid #006699;
}

<div id="centeredDiv"> centeredDiv</div>

Anmerkung: mit Hilfe der markierten CSS-Eigenschaften wird das DIV horizontal und vertikal im Browserfenster zentriert. Bei Veränderung der Fenstergrösse richtet sich das DIV immer automatisch zur Mitte aus.

Wenn blos eine horizontale Zentrierung des DIVs erwünscht ist, sieht der CSS-Code so aus:

#centeredDiv
{
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px; /* negative Hälfte von width: 500px */
border: 1px solid #006699;
}

Es sollen mehrere DIVs untereinander zentriert werden? Auch kein Problem.
Anstelle der ID="centeredDiv" wird nun eine CSS-Klasse für alle DIVs erzeugt:

div.centered
{
position: relative;
left: 50%;
width: 500px;
margin-left: -250px; /* negative Hälfte von width: 500px */
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #006699;
}

<div class="centered"> centered 1</div>
<div class="centered"> centered 2</div>
<div class="centered"> centered 3</div>

[ editpost 09:03 ]

In den vorangegangenen Beispielen hatte das DIV-Element immer eine feste Breite von 500px. Doch was tun, wenn neben der zentrierten Ausrichtung auch eine 'dynamische' Breite für das DIV erwünscht ist? Hier die Lösung:

body
{
margin: 20px 150px; /* Aussenabstand oben-unten / links-rechts */
padding: 0px;
}

#centeredDiv
{
width: 100%;
border: 1px solid #006699;
}

<div id="centeredDiv"> centeredDiv</div>

Zu guter letzt der CSS-Code für mehrere DIVs mit 'dynamischer' Breite und einer zentrierten Ausrichtung im Browserfenster:

body
{
margin: 20px 150px; /* Aussenabstand oben-unten / links-rechts */
padding: 0px;
}

div.centered
{
width: 100%;
margin-bottom: 10px;
border: 1px solid #006699;
}

<div class="centered"> centered 1</div>
<div class="centered"> centered 2</div>
<div class="centered"> centered 3</div>

[ Browsercheck für alle vorgestellten CSS-Techniken: IE5.5, Mozilla1.6, NN7.0, Opera7.23 ]

 

[Quaese]

Hi,

und zu guter letzt noch horizontale Zentrierung eines DIVs mit fester Breite und ohne absolute
Positionierung.

body{ text-align: center;       /* Zentrierung für IE */}
div.centered{ text-align: left; /* Schrift links ausrichten */
              margin: 0 auto;   /* Zentrierung Nicht-IE-Browser */
              width: 500px;
              border: 1px solid #000000;}

Ciao
Quaese

 

[goodfella]

Vielen Dank! Das ist genau das, wonach ich gesucht habe! Perfekt!
Goodfella

 

[Samonis]

Wow danke das hab ich auch gesucht. was ich jetz noch wissen möchte.
jetz habe ich einen div um meine anderen inhalte gemacht und möchte, dass sich die positionen auf dieses äussere div beziehen. wie mach ich das?

<div id="rahmen" class="rahmen"> //äusserer rahmen auf den sich alles beziehen soll
<div id="test" class="test">bla bla</div>
</div>

soweit richtig?

nur wie sieht es in der css datei aus? habe die erste veriante versucht, nur wie sieht meine id und class text aus? wenn ich sie jetz z.b
vom linken rand 20px
und vom oberen rand 10px setzen möchte? also absolut!

sprich ausser realitv für die unterschiedlichen auflösungen und im rahmen absolut, dass sich nichts verschiebt.

danke




EDIT: Hat sich erledigt. Habe gerade gesehen, dass die Teile sich aufeinander beziehen, wenn ich den divtag über alles spanne.