div-layer per CSS zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
auto
code
dank
eigenschaft
element
farbe
inhalt
nachteil
pech
plazieren
position
quatsch
restliche inhalt
richtig macht
seitenrand
testen
text
vergessen
vertikale zentrierung
-
Hallo,
ich möchte einen div-layer zentrieren ... allerdings nicht dessen Inhalt mit text-align, sondern wirklich den div-layer selbst, sodass der Text darin dennoch so umgeformt werden kann wie sonst auch (zentriert, link, Blocksatz etc.).
Ich hab zwar gelesen, dass so etwas auch mit margin: auto; bzw. margin: auto auto; gehen soll, aber da passiert nicht das geringste.
Daher hoffe ich, hier eine Antwort darauf zu finden ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also das geht so:
du zentrierst die Layer mit: text-align: center; (im body definiert)
und die Eigenschaften für den Layer sind dann:
text-align: left;
margin: auto;
=> so schaut das dann aus
body {
text-align: center;
margin: 0px;
padding: 0px;}
#layer {
text-align: left;
margin: 0px auto 0px auto;
}
<body>
<div id=\"layer\">Hallo</div>
</body>
Beitrag geändert: 28.4.2008 13:30:56 von sinew -
Also das geht so:
du zentrierst die Layer mit: text-align: center; (im body definiert)
und die Eigenschaften für den Layer sind dann:
text-align: left;
margin: auto;
Allerdings funktioniert das nur, wenn du die Breite (width) angegeben hast...
Ryan -
okay, danke, ich werd das dann mal testen ... das hatte ich zum Beispiel nicht gelesen, dass das text-alig:center; im body definiert werden muss ... das erklärt dann wohl auch, warum es nicht ging ;)
Inhalt des 2. Posts:
hm, irgendwie funktioniert das so aber auch nicht :(
Nebenbei hab ich da aber noch eine andere Frage: wie kann ich den div-layer direkt an den Seitenrand platzieren, ohne dass die background-Farbe der kompletten Seite sichtbar ist?
Beitrag geändert: 28.4.2008 23:01:48 von cam-webspace
Editiert von moritzpeuser: Doppelpost zusammengefasst. Bitte unterlasse zukünftig Doppelpostings!
Beitrag geändert: 29.4.2008 12:25:40 von moritzpeuser -
Das mit dem \'text-align: center\' im Body ist Quatsch.... Da hast du dann nicht nur den Layer zentriert, sondern auch alles andere, was du auf der Seite schreibst. Ich machs jeweils so:
#layer
{
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
width: 300px;
height: 300px;
}
Mit diesem CSS zentrierst du einen Layer sowohl horizontal, als auch vertikal. Wenn du nur eine vertikale Zentrierung wünschst, lässt du einfach das top und das entsprechende margin weg. margin-left entspricht übrigens width/-2; margin-top entspricht height/-2
Hoffe, damit kannst du etwas anfangen ;)
MfG
sebigisler -
Joar, sebis Lösung ist gut, vor allem wenn man den IE5.5 auch noch beachten muss. Ansonsten kann man den Weg über margin gehen.
div#hauptelement { width: 982px; margin: 16px auto 0; }
Das DIV Element mit der ID hauptelement ist 982px breit und wird mittig platziert. Zusätzlich hat es einen Abstand nach oben von 16px. Der restliche Inhalt sollte entsprechend in dem Element platziert sein ;) Nachteil ist, das man auf den IE 5.5 das Element mit diesem CSS nicht zentriert bekommt, aber wer nutzt den noch? ;) -
Das mit dem \'text-align: center\' im Body ist Quatsch.... Da hast du dann nicht nur den Layer zentriert, sondern auch alles andere, was du auf der Seite schreibst.
text-align: center; im Body mag zwar Quatsch sein für die meisten modernen Browser, hilft aber IE 5.5- das Ganze richtig darzustellen.
Ich machs jeweils so:
#layer
{
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
width: 300px;
height: 300px;
}
Mit diesem CSS zentrierst du einen Layer sowohl horizontal, als auch vertikal.
Ja, #layer wird vertikal zentriert, aber wenn der Text länger ist als der #layer, hast du Pech gehabt (wegen dem height) :P
Ryan
Beitrag geändert: 29.4.2008 16:38:08 von ryanblack -
Ja, #layer wird vertikal zentriert, aber wenn der Text länger ist als der #layer, hast du Pech gehabt (wegen dem height) :P
Kennst du Overflow: auto? ;)
-
Also, mit align: center im body wird nicht \"absolut alles\" zentriert und außerdem funktioniert es auch im IE 5.5 ;) - wenn man es richtig macht natürlich
Beitrag geändert: 29.4.2008 17:48:48 von sinew -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
