-2

我尝试在我的网页中将一个 div 元素（在这种情况下为页脚 div）居中，但它坚持保持在左侧。

我不太确定出了什么问题...有什么想法吗？先感谢您。

HTML：

<div id='main'>
</div>

<div id='footer'>Centered Text</div>​

CSS：

* {
    padding: 0;
    margin:  0;
    font-size:   12px;
}

body {
    font-family: helvetica, serif;
    font-size:   12px;
    overflow-y:scroll;
}

#main {
    border: 1px solid #bbbbbb;
    margin: 3% 5%;
    padding: 10px 10px;
}

#footer {
    font-size: 75%;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
}

​</p>

http://jsfiddle.net/DjPjj/2/

4

2 回答 2

2

http://jsfiddle.net/DjPjj/13/

试试这个：

#footer {
    font-size: 75%;
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
}

因为您的页脚是绝对定位的，所以您必须告诉它相对于其父容器的宽度。然后，您可以使用 text-align 将其中的文本居中。

这是另一个例子：http: //jsfiddle.net/DjPjj/17/

这个在绝对定位的元素中居中放置一个框。内盒可以居中使用margin: 0 auto，因为它不是绝对定位的。

#footer {
    font-size: 75%;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

#footerInner {
  margin: 0 auto;
  width: 300px;
  background-color: #ddd;
  text-align: center;
}

这更灵活，因为内部元素为您提供了一个相对于父元素居中的新容器。​</p>

于 2012-05-13T14:04:41.037 回答
1

它不会居中的原因是因为positon: absolute;.

请记住，这意味着页脚将始终位于页面底部，即使内容溢出它也是如此。它会重叠。如果要将其附加到页面底部，则必须将其上方容器的最小高度设置为 100%，然后处理负边距顶部并删除position: abosolute;

http://jsfiddle.net/4fuk7/1/

注意居中的文本是如何被覆盖的。

如果您正在寻找始终处于底部的东西，这将起作用 http://jsfiddle.net/4fuk7/3/

Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/ http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.

于 2012-05-13T14:06:57.267 回答