将文本置于div底部

Question

我的标题有div，而div中有文字。现在我已经想出如何将该文本放在div的底部，但我似乎无法将其放在中心。

text-align: center;无效。

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

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


<div id="heading">
    <h1 id="title">StrAgility</h1>
</div>

Answer 1

首先，您的#title没有设置宽度，因此如果您使用text-align:center;，它的宽度将包含#header。width:100%。

因此，您需要在#title上设置text-align:center;，然后 #title { position: absolute; bottom: 20px; width:100%; text-align:center; } 将按预期工作。

看到这个 的 FIDDLE

CSS：

{{1}}

Answer 2

文本对齐中心对您没有效果，因为您没有设置标题div的宽度。因此，它目前位于div的中心，只是div不比你的文本宽。因此，要更改“添加宽度：100％”，然后添加“text-align：center”。

啊，殴打它。