html - 文字不会居中？

Question

我遇到文本未在 DIV 中心对齐的问题。

我试过:

text-align:center;

和

width:225px; /*width of div*/ 
margin:0px auto;

它不会居中。

这是 DIV 的 HTML 和 CSS。

HTML

<div id="past">
<h3><a href="/artistphotos/">View Past Messages</a></h3>
</div>

CSS

#past{
    position:absolute;
    left:0;
    top:363px;
    width:225px;
    height:50px;
    background-image:url('../images/members/roundedbox.png');
    z-index:10;
}

我在构建页面时使用内联样式应用了文本对齐和边距。我已将它应用于 div、h3 和 a 元素，但它在其中任何一个元素中都不起作用。

我在这里错过了什么？谢谢!

这是 HTML 代码:(不包括页眉和页脚元素)

<div class="center over_all_under">
</div>
<!--[if !IE]>start intro<![endif]-->
<div class="center">
</div>
<!--[if !IE]>end intro<![endif]-->
<!--[if !IE]>strat main<![endif]-->
<div class="wrap_fullwidth" id="main">
<div class="center">
<br />
<div id="homepage">
    <div id="homepage-main">
        <div id="homepage-main-item" class="full_shadow>{module_adrotator,5622}
        <div id="past">
          <h3><a href="/artistphotos/">View Past Messages</a></h3>
        </div>

后面跟着一大堆代码。我可以将其粘贴到此处，但由于难以阅读，我只包含了 div 上方的代码。

Answer 1

text-align:center; 对我来说很好用:http://jsfiddle.net/mrchief/bhtZe/

#past {
    position:relative;
    left:0;
    top:363px;
    width:225px;
    height:50px;
    background-image:url('../images/members/roundedbox.png');
    z-index:10;
    text-align:center;    
}

更新:查看页面后，从 #past h3 中删除 position: absolute，因为这会阻止 href 居中对齐(它得到绝对定位)。

此外，您的 div 宽度较小，如果您打算将其置于父背景的中心，请将 #past width 设置为 100%。