vertical-align: middle; & position:absolute;

[Kazel]

Sehr geehrte HTML Community,

ich habe ein Problem und meine Vermutung ist,
dass sich vertical-align middle & position absolute nicht so super verstehen,
weil ich einen Container gebaut habe, 300x300 px, dieser hat nen Background
und beinhaltet einen Text. Mein Ziel ist es, dass der Text "mittig mittig" ist,
sprich, vertical und horizntal in der Mitte gesetzt. Was problemlos funktioniert,
doch sobald ich den Contrainer positionieren will, wirkt das vertical-align:middle; nicht mehr,
sobald ich aber position:absolute; lösche, ist der Text wieder mittig.

Hier mein CSS:

.container {
    position:absolute;
    left:10%;
    top:10%;
    height:    300px;
    width:300px;
    text-align:center;
    display:table-cell;
    vertical-align:    middle;
    background-color:#F00;
}

Ich könnte zwar auch Margin-left benutzen, doch würde es mich trotzdem interessieren,
wieso das mit position absolute nicht funktioniert.

Edit: Na gut, mit margin-left tut ers auch nicht...

LG,
Kazel

 

[Banana_Jones]

Deine Vermutung geht in die richtige Richtung, allerdings einen Schritt zu wenig. Das Problem liegt in der Kombination von display: table-cell und einer Positionierung. Dies verträgt sich im Firefox bspw. nicht. (Chrome hat da soweit ich mich erinnern kann keine Probleme)

 

[djheke]

Versuchs mal so:

.container {
 margin:10%;
}

.container span {
    height:300px;
    width:300px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    background-color:#F00;
}

 <div class="container"><span>text</span> </div>