• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Box genau mittig im Fenster

J

j-l-n

Guest
Ich möchte, dass eine Box mit Inhalt sich IMMER genau MITTIG im Fenster befindet, auch wenn ein User die Größe ändert.
Folgendes habe ich mir überlegt, allerdings bleibt dabei die Box links oben, was also absolut gar nicht richtig funktioniert:
Code: 
.box{
 border: 5px solid #3366FF;
 width: 75%;
 position: fixed;
 vertical-align: middle;
 margin-left: auto;
 margin-right: auto;
}
 
Zuletzt bearbeitet von einem Moderator:
Das ist nicht ganz einfach, aber ist machbar:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Center element horizontal and vertical with arbitraty size</title>
<style type="text/css">

#outer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: nowrap;
}

#spanner {
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}

#inner {
	display: inline-block;
	vertical-align: middle;
	width: 200px;
	height: 300px;
	border: 2px dashed darkgray;
	white-space: normal;
}

</style>
</head>
<body>
<div id="outer">
<span id="spanner"></span><span id="inner">
200 x 300
</span>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
kkapsner schrieb:
Das ist nicht ganz einfach, aber ist machbar:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Center element horizontal and vertical with arbitraty size</title>
<style type="text/css">

#outer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

#spanner {
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}

#inner {
	display: inline-block;
	vertical-align: middle;
	width: 200px;
	height: 300px;
	border: 2px dashed darkgray;
}

</style>
</head>
<body>
<div id="outer">
<span id="spanner"></span><span id="inner">
200 x 300
</span>
</div>
</body>
</html>
Zum Vergrößern anklicken....

Dankeschön! Kaum zu glauben, dass das (naja "so kompliziert" wäre übertrieben) relativ aufwändig ist...
 
Ach ja: wenn ich anstatt dem #outer den body auf height/width 100% setzen würde, brauche ich ihn dann?
Und einen Fehler gibt es: wenn ich so stark zoome, dass die Box größer als das Browserfenster ist, verschwindet sie...
 
Zuletzt bearbeitet:
Julian JP schrieb:
Ach ja: wenn ich anstatt dem #outer den body auf height/width 100% setzen würde, brauche ich ihn dann?
Zum Vergrößern anklicken....
Wenn du dem body ein position: fixed; gibst, dann nicht...
Julian JP schrieb:
Und einen Fehler gibt es: wenn ich so stark zoome, dass die Box größer als das Browserfenster ist, verschwindet sie...
Zum Vergrößern anklicken....
Mist... das hatte ich noch nicht ausprobiert. Aber ein white-space: nowrap; im #outer (und dann ein white-space: normal; im #inner, um dort wieder normalen Zeilenumbruch zu haben) lösen das Problem (oben geändert). Das Element ist leider nicht "zentriert", wenn es an den Rand anstößt, da es dann links bzw. oben "klebt"... aber ein fixiertes Element, das nicht in das Browserfenster passt, ist sowieso ein Problem.
 
Perfekt, danke nochmal!
PS: Thema ist für mich "Gelöst".
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben