Div vertikal zentrieren

Heiko · Beiträge: 3169 Erhaltene Danke: 11

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. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Hallo!

Ich weiß nicht, ob's auch vertiakl geht, aber für horizontal habe ich das hier gemacht:

markieren

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

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Heiko · Beiträge: 3169 Erhaltene Danke: 11

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. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Ich dachte eigentlich, dass Du mal versuchst, margin-top und margin-bottom auf auto zu setzen. ;-)

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

UGrohne · Verfasst: Do 24.05.07 13:33

Dazu musst Du einen kleinen Trick anwenden. Du musst erstmal definieren, dass 100% des Browserfensters verwendet werden sollen:

markieren

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.

GTA-Place · Verfasst: Do 24.05.07 13:35

Mit Margin funktioniert das nicht. Aber Google hilft:

milov.nl/code/css/verticalcenter.html
www.jakpsatweb.cz/cs...center-solution.html
www.student.oulu.fi/...irai/www/css/middle/

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Heiko · Beiträge: 3169 Erhaltene Danke: 11

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 · Verfasst: Do 24.05.07 13:44

Hab das mal ausprobiert: So funktioniert es einigermaßen (nur hingeschludert

):

markieren

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 · Beiträge: 3169 Erhaltene Danke: 11

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 · Beiträge: 3169 Erhaltene Danke: 11

Für FF habe ich es jetzte hinbekommen (html und body auf 100% versteht sich):

markieren

Quelltext

1:
2:
3:
4:
5:

<div style="height: 100%; display: table;">
<div style="display: table-cell; vertical-align: middle;">
...
</div>
</div>

Ehemaliges Mitglied Erhaltene Danke: 1

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

markieren

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 · Beiträge: 3169 Erhaltene Danke: 11

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...

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme