nicht angemeldet
layer mittig
hi!
ich möchte einen layer sowohl horizontal als auch vertikal zentriert haben.
soweit binnisch bis jetzt:
<body style="background:#000000; margin:20px 0px; padding:0px; text-align:center; overflow:auto">
<div style="background:#FFFFFF; width:700px; height:500px; text-align:left">
nur das mit dem vertikal zentrieren habbisch noch net raus.
ich dacht irgendwie, dass
http://www.selfhtml.net/css/eigenschaften/ausrichtung.htm#vertical_align
geht, aber nein....
mfg
robert
-
Ich weiß zwar nicht ob die lösung so toll ist, aber es ist wenigstenz ein versuch:
bestimme per javascript die bildschirmmitte und ziehe davon jeweils die hälfte deiner layergröße ab, jetzt layer positionsangaben im code hinzufügen und dann üsste er zentriert sein sowohl hori wie vert.
Gruß
Ingo
-
Hallo Ingo,
Ich weiß zwar nicht ob die lösung so toll ist, aber es ist wenigstenz ein versuch:
bestimme per javascript die bildschirmmitte und ziehe davon jeweils die hälfte deiner layergröße ab, jetzt layer positionsangaben im code hinzufügen und dann üsste er zentriert sein sowohl hori wie vert.
argh, gibt es denn nur noch JS?
mit folgenden Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Untitled</title><style type="text/css">
html, body{width:100%; height:100%}
#zentri{position:absolute; top:50%; left:50%; width:200px; height:300px; border:1px solid red; margin-top:-150px; margin-left:-100px}
</style>
</head><body>
<div id="zentri"></div>
</body>
</html>geht es doch auch ohne JS und nur mit CSS. Funktioniert latürnich nur wenn die Größe des DIV bekannt ist.
Grüße aus Nürnberg,
HarryS--
Dank des SELFcodes weiß ich endlich was ich als Signatur nehmen soll.
sh:( fo:) ch:? rl:? br:> n4:° ie% mo:) va| de:> zu:| fl:( ss:{ ls:# js:|
-
-
Hallo,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
html {height:100%; width:100%}
body,table {height:100%; width:100%; margin:0}
td {text-align:center; vertical-align:middle}
</style><title>mittig ausrichten</title>
</head>
<body>
<table>
<tr><td>Text, der in der Mitte ist.</td></tr>
</table>
</body>
</html>$xNeTworKx.
--
Mit Computern lösen wir Probleme, die wir ohne sie gar nicht hätten. -
Hallo,
ich möchte einen layer sowohl horizontal als auch vertikal zentriert haben.
soweit binnisch bis jetzt:
<body style="background:#000000; margin:20px 0px; padding:0px; text-align:center; overflow:auto">
<div style="background:#FFFFFF; width:700px; height:500px; text-align:left">Um ein Block Element horizontal zu zentrieren solltest du margin-left und margin-right auf auto stellen.
Wenn es mit text-align: center im Parent klappt, dann nur weil der Browser nicht standardkonform arbeitet. text-align ist für Inline-Elemente gedacht.Ob die vertikale Zentrierung entsprechend mit margin-top und -bottom: auto sowie einem html, body { height: 100% } klappt, das musst du probieren, da bin ich mir nicht sicher.
Viele Grüße,
Stefan
-
Moin!
Folgende Lösungen funktionieren:
1. möglichst kleinen Div mittig positionieren mit position:absolute; top:50%, left:50%;
anschließend den _relevanten_ Div relativ dazu positionieren mit
jeweils -0,5 x Breite des Divs und -0,5 x Höhe des Divs.
(ob letzteres auch mit %-Angaben funzt weiß ich nicht!)2. margin:50% 0% 0% 50%;
dann den relevanten Div ausrichten wie bei 1.3. Einzellige Tabelle mit Höhe und Breite von 100%
Die Tabellenzelle reagiert dann auch auch text-align:center; vertical-align:center;
(letzteres könnte auch middle sein - war da nicht was mit nem Fehler in SelfHTML?)Die erste Version baut in Moz/N7 schon mal Fehler ein, wenn man Links in den Div
schreibt, die zweite funzt (glaube ich mich zu erinnern!?) im Opera nicht ganz präzise,
also mit der genauen Mitte, letztere habe ich noch nicht selbst ausprobiert! *g*Sorry, dass um die Zeit zu faul war/bin, alles umfassend nachzuschlagen,
probiere es einfach aus, zur Not kannst du ja hier noch ein Feedback schreiben!?Gruß
Der Hans