Entwickler-Ecke
Beschreibungssprachen - Div vertikal zentrieren
Heiko - Do 24.05.07 14:18
Titel: Div vertikal zentrieren
Hallo,
ich schreibe wieder an einem größerem PHP-Projekt. Da bin ich jetzte am Login-Skript (wieder einmal). Optisch am schönsten würde das ganze natürlich am schönsten aussehen, wenn das Login-Fenster nicht nur horizontal zentriert ist, sondern auch horizontal. Da das nicht so ohne weiteres geht (schließlich weiß der Interpreter nicht wie hoch das Fenster ist), habe ich ein Div gebaut, was 100% der Browserhöhe einnimmt. In diesem Div soll nun das Login-Div liegen, aber wie macht man das (nur mit CSS also nicht mi JS)? ICh habe es schon mit vertical-align: middle probiert, aber leider hat das nicht funktioniert.
Grüße
Heiko
Christian S. - Do 24.05.07 14:22
Hallo!
Ich weiß nicht, ob's auch vertiakl geht, aber für horizontal habe ich das hier gemacht:
Quelltext
1:
2:
3:
4:
5:
6:
7:
| div#container {
position:relative;
margin-top: 50px;
margin-left:auto; margin-right:auto;
border-width: 1px 1px 1px 1px; border-color: black; border-style: solid;
width: 900px; height: 600px; background-image:url(../images/background.jpg);
} |
Grüße
Christian
Heiko - Do 24.05.07 14:26
Hallo Christian,
horizontal habe ich schon (ist ja Elementar ;) ). Hatte nur vergessen das so zu formulieren, dass nicht das horizontale das Problem ist, sondern nur das vertikale.
Grüße Heiko
Christian S. - Do 24.05.07 14:28
Ich dachte eigentlich, dass Du mal versuchst, margin-top und margin-bottom auf auto zu setzen. ;-)
UGrohne - Do 24.05.07 14:33
Dazu musst Du einen kleinen Trick anwenden. Du musst erstmal definieren, dass 100% des Browserfensters verwendet werden sollen:
Quelltext
1:
2:
3:
| html,body{
height:100%;
} |
Dann kannst Du mit height:100% arbeiten. Aber der IE behandelt sowas immer noch ein wenig anders als Firefox. Vertikales Zentrieren ist nicht ganz einfach.
Heiko - Do 24.05.07 14:39
 Christian S. hat folgendes geschrieben: |
| Ich dachte eigentlich, dass Du mal versuchst, margin-top und margin-bottom auf auto zu setzen. ;-) |
Hab eich schon probiert mit einer css-Datei (
div {margin: 0Px auto}). Horizontal macht er es ja auch, aber vertikal nicht.
@Ugrohne: Das hatte ich sowieos schon (siehe Startpost) ;)
@GTA: Ich gucks mir nach dem abschicken an ;).
UGrohne - Do 24.05.07 14:44
Hab das mal ausprobiert: So funktioniert es einigermaßen (nur hingeschludert ;)):
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
#container{
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
}
#login {
position:relative;
top:50%;
border:1px solid red;
display:block;
}
</style>
</head>
<body>
<div id="container"><div id="login">Test</div></div>
</body>
</html> |
Heiko - Do 24.05.07 15:06
Hallo Christian,
das mit top: 50% habe ich schon an verschiedenen Quellen gesehen, allerdings ist es ungeeignet, da er dann bei 50% erst anfängt. Es gibt varianten, wo margin negativ ist und die es somit zentrieren. Aber das Problem ist: ich kenne die Größe nicht...
Grüße
Heiko
Heiko - Do 24.05.07 15:14
Für FF habe ich es jetzte hinbekommen (html und body auf 100% versteht sich):
Quelltext
1:
2:
3:
4:
5:
| <div style="height: 100%; display: table;">
<div style="display: table-cell; vertical-align: middle;">
...
</div>
</div> |
Delete - Do 24.05.07 15:23
wenn ich ein DIV-tag zentriere, mach ich das immer so im style-sheet; angenommen, es ist 600px breit und 600 px hoch:
//Edit:aber zuerst mach ich alle paddings und margins weg, damit ich das später leichter habe, die site für alle browser anzupassen
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
| * {
padding: 0px;
margin: 0px;
}
#zentri {
position:absolute;
top:50%;
left:50%;
width:600px;
height:600px;
border:0px;
margin-top:-300px;
margin-left:-300px
} |
Heiko - Do 24.05.07 15:26
| Heiko hat folgendes geschrieben: |
| Es gibt varianten, wo margin negativ ist und die es somit zentrieren. Aber das Problem ist: ich kenne die Größe nicht... |
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!