nicht angemeldet
'Alles in der Mitte'
Hallo,
wie kann man alle Elemente in der Mitte einer Div-Definition anzeigen lassen (so, dass alle übereinander liegen)?
Danke
Ole
-
Hallo
wie kann man alle Elemente in der Mitte einer Div-Definition anzeigen lassen (so, dass alle übereinander liegen)?
Ich verstehe nicht, was du willst. Anzeigen lassen kann man sich doch alles mit einem Browser?!
MfG
André
-
Ich will, dass mehrere Elemente, mit dem Mittelpunkt genau übereinander, übereinander angezeigt werden...
Ole
-
Hallo
Ich will, dass mehrere Elemente, mit dem Mittelpunkt genau übereinander, übereinander angezeigt werden...
Du willst also in dem Div die Elemente zentrieren?!
div {text-align:center;}
MfG
André
-
Nein, die Elemente sollen alle genau übereinander liegen...
-
Hallo,
Nein, die Elemente sollen alle genau übereinander liegen...
Formulierungshilfe:
Innerhalb eines Bereichs (DIV) sollen alle Elemente so positioniert sein, dass sie sich horizontal und vertikal in der Mitte dieses Bereiches befinden. Mehrere Elemente sollen sich überlappen.1. Damit mehrere Elemente sich überlappen, musst Du sie aus dem normalen Elementfluss lösen. Das heißt, Du musst sie innerhalb des umgebenden Bereichs absolut positionieren.
2. Um Elemente absolut, genau in der Mitte eines Bereichs zu positionieren, müssen die Größe dieses Bereichs und die Größen der zu positionierenden Elemente absolut bekannt sein. Das bedeutet, es kommen nur Blocklevel-Elemente und solche Inline-Elemente in Frage, für die Breite und Höhe angegeben werden können (z.B.: IMAGE).
3. Ist das alles bedacht, kannst Du mit den CSS-Eigenschaften position, width, height, left, top, margin-left und margin-top arbeiten.
Bsp.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mittel-DIVs im DIV</title>
</head>
<body>
<p>Inhalt vorher</p>
<div style="position:relative; width:600px; height:250px; border:20px solid black;">
<div style="position:absolute; width:300px; height:200px; background-color:red; left:50%; margin-left:-150px; top:50%; margin-top:-100px;"></div>
<div style="position:absolute; width:250px; height:150px; background-color:green; left:50%; margin-left:-125px; top:50%; margin-top:-75px;"></div>
<div style="position:absolute; width:200px; height:100px; background-color:yellow; left:50%; margin-left:-100px; top:50%; margin-top:-50px;"></div>
<div style="position:absolute; width:150px; height:30px; line-height:30px; font-size:30px; text-align:center; left:50%; margin-left:-75px; top:50%; margin-top:-15px; border:1px solid black;">Text</div>
</div>
<p>Inhalt nachher</p>
</body>
</html>viele Grüße
Axel
-
An die Methode habe ich auch schon gedacht - nur ist ein Element ein Text und ich weiß nicht, wieviel Pixel mal wieviel Pixel der hat - und ich weiß auch nicht, wie ich das rausfinden kann...
Deshalb dachte ich, ich könnte irgendwie 'sagen', dass der Punkt, für den die top- und left-Angaben gelten, der jeweilige Mittelpunkt ist...
Ole
-
Hallo,
An die Methode habe ich auch schon gedacht - nur ist ein Element ein Text und ich weiß nicht, wieviel Pixel mal wieviel Pixel der hat - und ich weiß auch nicht, wie ich das rausfinden kann...
Nun, eins der Elemente in meinem Beispiel ist auch ein Text.
Allerdings wäre ein mehrzeiliger Text mit unbekannter Zeilenanzahl problematisch.Deshalb dachte ich, ich könnte irgendwie 'sagen', dass der Punkt, für den die top- und left-Angaben gelten, der jeweilige Mittelpunkt ist...
Das geht doch :-)) top:50%; left:50%. Allerdings steht dann die linke obere Ecke des Contents in der Mitt des ungebenden Elements.
Du willst, dass sich das Block-Element, in dem der mehrzeilige Text steht, mit vertical-align ausrichten lässt. Das geht nur in einer Tabellenzelle oder in einem Element, dem die CSS-display-Eigenschaft sagt, dass es sich wie eine Tabellenzelle zu verhalten hat.
http://www.w3.org/TR/REC-CSS2/visuren.html#display-propviele Grüße
Axel
-
-
-
-
-
-