nicht angemeldet
In der Mitte platzieren
Hallo,
ich möchte Elemente genau in der Mitte des Bildschirms platzieren.
#Ground1 ist das Grundelement, dass alles andere enthält.
#Ground1 { position:absolute; top:0px; left:0px; width:100%; height:100%; vertical-align:middle; text-align:center; }´
Ist das Element, welches genau in der Mitte sein soll. Vertikal, und Horizontal. Allerdings, wird es nur horizontal zentriert ausgerichtet, vertikal, bleibt es am oberen Rand stehen.
#Ground2 { width:1000px; height:470px; background-color:#EEEEEE; }
Kann man mir jemand helfen, wie ich das programmieren kann?
Natürlich soll es so sein, dass es unabhängig von Bildschirm und Auflösung ist, und es soll mit CSS sein (also z. B. keine Tabellen).
Danke für die Hilfe
Gruß Giovanni
-
-
Ja genau sowas, versuche das jetzt mal zu entschlüsseln. Aber irgendwie klappts nicht so recht.
-
Tachchen!
Und wenn es irgendwann funktioniert, beachte bitte das Problem kleiner
Fenster bei dieser Lösung. Da entschwinden ggfs. Inhalte links ins
Nirvana ohne einen Scrollbalken zu verursachen.Sei dir sicher, dass die Zentrierung das wert ist!
Gruß
Die schwarze Piste
-
Okay, danke für eure Hilfe!
-
-
-
Hallo,
suchst du vielleicht solch ein Beispiel?
Mit freundlichen Grüßen
André
Das ist auch nicht genau in der Mitte! Schau dir mal das an:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
<!--#horizon
{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}#content
{
font-family: Verdana, Geneva, Arial, sans-serif;}
--></style>
</head><body>
<div id="horizon">
<div id="content"> <h1> Text <br> Text <br> Text </h1> </div>
</div>
</body></html>
-
-
<html><head>
<style type="text/css"><!--
.stage {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;border: 1px solid #000000;
}
--></style>
</head><body><div name="stage" id="stage" class="stage">Inhalt</div>
</body></html>
-
Selbes Problem! Schau mal das an:
<html><head>
<style type="text/css"><!--
.stage {
position: absolute;
width: 500px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;border: 1px solid #000000;
}
--></style>
</head><body><div name="stage" id="stage" class="stage">Inhalt</div>
</body></html>
Der Abstand nach oben beträgt immer 50%. D. h. ändert sich die Größe von dem Kasten, muss ich wieder den Abstand nach oben in % korrigieren. Ist zwar nicht so wild, wenn die Größte steht. Aber gibt es nicht ne Lösung wie bei Tabellen. Wo ich sage, Inhalt von Zelle horizontal=zentrieren, vertikal=Mitte?
Gruß Giovanni
-
schau dir mein beispiel genauer an:
ich nehme an du hast eine genaue breite und höhe des objekts, dass du zentrieren willst.
deswegen musst du von margin-height und margin-left die hälfte der höhe bzw. der breite abzihen.
und es funkzioniert.
in allen browser!
-
-