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;
}

我在构建页面时使用内联样式应用了text-align和margin。我已经将它应用于div，h3和一个元素，它们在任何一个元素中都不起作用。

我在这里缺少什么？谢谢！

以下是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;    
}

更新：查看该页面后，从position: absolute移除#past h3，因为这会阻止href进行居中对齐（它位于绝对位置）。

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

Answer 2

这是因为你有position:absolute对于绝对定位的元素，它们被从流中取出，margin没有任何意义。

您可以尝试将图片置于不同的绝对位置DIV内，图片的宽度为100%。然后将#past留在relative位置，并使用边距技巧。

以下是一个有效的例子：http://jsfiddle.net/c5xaW/

Answer 3

在#past css规则中，添加以下内容：

text-align: center;

它应该工作。我试过了here。尝试添加和删除规则，看看会发生什么。

文字不会居中？

3 个答案: