div vertikal und horizontal zentrieren

VoinG

VoinG

Angesehenes Mitglied
Hallo!

Heute habe ich gefunden wonach ich schon lange gesucht habe - wie man ein div im Browserfenster horizontal und vertikal (!) zentriert! Ich denke das wird für einige hier sehr nützlich sein, das funktioniert auch, und ich habe noch eine Frage dazu.

Zuerst Code:

CODE
<div style="
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
background-color: #f5f5f5;
border: 1px dotted #000000;">
Text. Wirklich vertikal und horizontal zentriertes div!
</div>


Und meine Frage:
ich hab's früher auch sehr häufig gesehen, nicht nur hier, auch zu den anderen verschiedensten Anlässen, die Minuswerte
CODE margin:-100px 0px 0px -200px;


Erklärt mir, bitte, oder gibt ein Link, was passiert bei diesen Minuswerten, was bewirken die, was möchte man dadurch erziehlen?

Danke!
PS. Cool, das war mein 100. Beitrag
rolleyes.gif
 
QUOTE (VoinG @ Fr 9.2.2007, 2:55) PS. Cool, das war mein 100. Beitrag
rolleyes.gif


Und das nach exakt einem Jahr!
biggrin.gif
laugh.gif
 
QUOTE (VoinG @ Fr 9.2.2007, 2:55)
CODE margin:-100px 0px 0px -200px;


Erklärt mir, bitte, oder gibt ein Link, was passiert bei diesen Minuswerten, was bewirken die, was möchte man dadurch erziehlen?

Also, mit einem Top/left von 50% zentrierst du das ganze. Danach gehst du mit den negativen Margins wieder die halbe breite/höhe des Divs rückwärts. Ansonsten hättest du "nur" die obere, linke Ecke zentriert..

Ich bezweifle aber dass der Code in allen Browsern sauber interbretiert wird..
 
Hallo,

hab vor einigen Tagen auf selfHTML noch gelesen, dass die CSS Eigenschaften wie "Top" vom IE nicht interpretiert werden (also komplett ignoriert).
Ob das für den IE7 nicht zutrifft weiß ich nicht, aber aufgrund der Tatsache das in absehbarer Zeit noch viele mit dem IE6 unterwegs sein werden sollte man diese Problematik nicht vergessen...
 
Hallo,
das Script funktioniert mit allen Browsern außer IE 5(mac) und Netscape Naviagtor 4.
Quelle: css-buch
mfg
 
Vielen Dank für die Antworten, aber leider habe ich das doch nicht verstanden...
sad.gif


QUOTE Danach gehst du mit den negativen Margins wieder die halbe breite/höhe des Divs rückwärts. Ansonsten hättest du "nur" die obere, linke Ecke zentriert..


Könnt Ihr vielleicht diesen Satz irgendwie anders erklären? Ist das irgendwo beschrieben? Wie wirken die Minuswerte auf den Browser überhaupt aus , oder wie wird es durch den Browser genau interpretiert und ausgeführt?
 
Hallo,
mit den Angaben
top:50%;
left:50%;
position:absolute;
Positionierts Du den DIV Container besser gesagt die Linke obere Ecke in der Mitte des Bildschirms,
dann wird mit mit einem
margin-top:-100px;
marign-left:-200px;
die Linke obere Ecke ,die ja in der mitte des Bildschrims liegt in die Richtungen verschoben um die hälfte deines DIVs.
Man muß die Linke Obere Ecke immer als NULL Punkt sehen von jedem Fenster und auch DIV Container .
Minus Werte haben keine großen Auswirkungen mann kann so auch Rollover Buttons erzeugen die schneller sind als ein neues Bild zu laden (so mal am Rande erwähnt).

Zusammen gefasst heißt das das DU deine Linke obere Ecke deines DIVs mit der absoluten positionierung in die mitte des Bildschirms legst und dann per margin die Linke Obere Ecke soweit verschiebst das der mittelpunkt deines DIVS auch in der mitte des Bildschrims ist.
 
Sooooooo, ich glaub dass ich endlich verstanden habe (weil es mir peinlich war zum x-ten Mal nicht zu verstehen
biggrin.gif
)
Was ich früher nicht verstand, war, dass man mittels
CODE top: 50%;
left: 50%;



nur die linke obere Ecke im Zentrum des Bildschirms positioniert, und das braucht man gar nicht, man braucht die Mitte des divs in der Mitte des Bildschirms!

Und das macht man indem man verschiebt, das ist ein Schlüsselwort hier, jetzt verstehe ich dass Minuswerte in margin nicht wegrücken, wie immer, sondern annähern, stimmt's?
smile.gif


Bedanke mich vielmals dass ich doch ein wenig klüger geworden bin!
rolleyes.gif
 
Ist zwar schon ein bisschen her, dass das Thema diskutiert wurde, aber ich habe dabei folgendes Problem:
Mein div ist ~1000x600px groß. wenn ich versuche, es mit dem vorgeschlagenen Code zu zentrieren,
wird es bei kleineren auflösungen einfach oben abgeschnitten. Man kann also noch zum unteren
Rand des divs scrollen, der obere verschwindet aber. gibts da irgend eine lösung?
 
Ich habe das gleiche Problem wie Soulrender
bei einer geringeren Auflösung schneidet es mir den oberen Rand ab :-(

Der Code:
html, body{
margin-top: 0px;
margin-left: 0px;;
margin-right: 0px;
margin-bottom: 0px;
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 16px;
height: 100%;
background-color: white;
background-image: url("pics/bg.png");
background-repeat: repeat-y;

}
#bgmain{
position: absolute;
height:775px;
width:1076px;
margin:-387px 0px 0px 0px;
top: 50%;
left: 100px;
background-image: url("pics/bg_main.png");


}
 
Das Problem entsteht, wenn 50% weniger als 387px sind. Für eine Lösung müsste wahrscheinlich mit einem weiteren Div oder so gearbeitet werden. Muss noch ein bisschen Nachdenken.
 
und hier kommt schon die Lösung:

html, body {
margin:0;
padding:0;
height:100%;
}

body {
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 16px;
height: 100%;
background-color: white;
background-image: url("pics/bg.png");
background-repeat: repeat-y;
}

#distance {
width:1px;
height:50%;
margin-bottom:-387px; /* Hälfte der Containerhöhe */
float:left;
}

#bgmain {
margin:0 auto;
position:relative; /* Setzt den Container in den Vordergrund des distance */
text-align:left;
height:775px;
width:1076px;
clear:left;
background-image: url("pics/bg_main.png");
}
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben