vertikale Ausrichtung eines <div>

[Erri]

Hi,

ich erstelle zurzeit ein Seitenlayout mittels CSS ---> das erste mal.
Dabei habe ich einen Kasten:

#kasten{
 position: relative;
 vertical-align:bottom;  --> habe schon center bzw. middle probiert
 width: 100%;
 font-size: 0.7em;
 font-family: arial;
 text-align: center;
}

diesen möchte ich gern zentriert (im Bsp. bottom) auf der Seite ausrichten.
Da ich bisher auf keiner Website gefunden habe, wie man dies machen kann, habe ich erst einmal als Wert "bottom" angegeben.
Selbst das funktioniert nicht.

Aus diesem Grund habe ich versucht, um diesen Kasten ein weiteres <div> zu legen:

#aussen{
 margin: 0;
 height: 100%;
 width: 100%;
}

Aber auch hier konnte ich keine Erfolge erzielen
Kann mit jemand sagen, ob es überhaupt möglich ist, einen Kasten vertikal zentriert auf einer Seite auszurichten?

Viele Grüße
Erri

[Ole]

hi

wenn du dein div am "bottom" der seite ausrichten möchtest, warum machst dus dann nicht?

z.B.
position: relative; bottom: 0px;

absolute zentrierung ist ein kleines problem, aber durchaus zu meistern.

position: realtive; top: 50%; left: 50%; margin-top: -(hälfe der höhe des auszurichtenden elementes)px; margin-left: -(hälfe der breite des auszurichtenden elementes)px;

so long
ole
(8-)>

[Erri]

Hi Ole,

z.B.
position: relative; bottom: 0px;

Das funktioniert aber auch nicht.
Kann es sein, dass es am IE liegt?
Einen anderen Browser habe ich hier nicht zur Verfügung.

Hier das Beispiel, wie ich es gerade getestet habe:

Die CSS-Datei:
#vertical{
 position: relative;
 margin-bottom: 0px;
 text-align: center;
}

Und der HTML-Teil:
<div id="vertical">
INHALT DES KASTENS
</div>

So wirds trotzdem oben angezeigt.

Viele Grüße
Erri

[Ole]

hi

kleines suchbild: wo ist der fehler?

meins

position: relative; bottom: 0px;

deins

position: relative; margin-bottom: 0px;

so long
ole
(8-)>

[Erri]

Hi,

meins

position: relative; bottom: 0px;

deins

position: relative; margin-bottom: 0px;

Sorry, ich habe vergessen zu schreiben, dass ich beide Versionen getestet habe. Es funktioniert aber mit keiner.
Ist es möglich, dass es am IE liegt?

Viele Grüße
Erri

[MudGuard]

Hi,

position: relative; bottom: 0px;

Sorry, ich habe vergessen zu schreiben, dass ich beide Versionen getestet habe. Es funktioniert aber mit keiner.
Ist es möglich, dass es am IE liegt?

Eher daran, daß das Elternelement nicht die nötige Höhe hat. Gib ihm eine auffällige Hintergrundfarbe, dann siehst Du, wie hoch es ist.

cu,
Andreas

[Erri]

Hallo nocheinmal,

vielen Dank für eure Hilfe.
Ich habs jetzt hinbekommen. Das ergebnis seht ihr hier:
http://www.imagine4u.net/test/vertikale_zentrierung.html

Für Fehlerhinweise bin ich sehr dankbar, weil ich ein CSS-Newbe bin und es sehr lange gedauert hat, bis ich davon überzeugt war.

Vielen Dank und Viele Grüße
Erri

[HtX]

position: realtive; top: 50%; left: 50%; margin-top: -(hälfe der höhe des auszurichtenden elementes)px; margin-left: -(hälfe der breite des auszurichtenden elementes)px;

Aber die Breite des Elements sollte 770px nicht überschreiten, sonst sehen Surfer mit niedrigerer Auflösung nicht alles.

Bye

[at]

Hallo.

Aber die Breite des Elements sollte 770px nicht überschreiten, sonst sehen Surfer mit niedrigerer Auflösung nicht alles.

Die Auflösung deines Irrtums kannst du dem Archiv entnehmen.
MfG, at