在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;将按预期工作。

看到这个 FIDDLE

CSS：

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

Answer 2

文本对齐中心并不为你工作，你会期望你有没有设置标题div的宽度。因此，它目前位于div的中心，只是div不会比文字宽。所以要改变添加“宽度：100％”，然后添加“文本对齐：中心”。

啊，挨打吧。