html - 将文本置于 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 中。

因此您需要将 #title 上的 width:100% 设置为 然后 text-align:center; 将按预期工作.

看到这个<强> FIDDLE

CSS:

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