Zentrieren Sie einen Text am unteren Rand eines divs

Question

Ich habe ein div für meinen Header und einen Text in diesem div. Jetzt habe ich herausgefunden, wie ich diesen Text am unteren Rand des div platzieren kann, aber es gelingt mir nicht, ihn in die Mitte zu setzen.

text-align: center; hat nicht funktioniert.

#heading {
 position: relative;
 background: -webkit-linear-gradient(#acbfb9,#cae1da); /* Für Safari */
 background: -o-linear-gradient(#acbfb9,#cae1da); /* Für Opera 11.1 bis 12.0 */
 background: -moz-linear-gradient(#acbfb9,#cae1da); /* Für Firefox 3.6 bis 15 */
 background: linear-gradient(#acbfb9,#cae1da);
 height: 150px;
 width: 100%;
}

#title {
 position: absolute;
 bottom: 20px;  
}

    StrAgility

Answer 1

Zuerst hat Ihr #title keine Breite festgelegt, so dass es die Breite des Textes hat, den es enthält. Wenn Sie verwenden text-align:center;, wird es nicht in der Mitte des #header zentriert.

Sie müssen also width:100% auf #title setzen und dann wird text-align:center; wie erwartet funktionieren.

Sehen Sie sich das an FIDDLE

CSS :

 #title {
        position: absolute;
        bottom: 20px;
        width:100%;
        text-align:center;
    }

Answer 2

Text-align center funktioniert nicht wie erwartet, da die Breite des Titel-Divs nicht festgelegt ist. Aktuell befindet es sich daher in der Mitte des Divs, es ist nur so, dass das Div nicht breiter ist als Ihr Text. Um das zu ändern, fügen Sie 'width:100%' hinzu und dann 'text-align: center'.

Ah, geschlagen worden.