在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％」，然後添加「文本對齊：中心」。

啊，捱打吧。