Question

我正在尝试使用以下CSS在页面底部居中一个分组div：

#footer {
clear: both;
position: absolute;
bottom: 0;
left: 0;
}

我已经在这个工作了好几个小时了，真正令人沮丧的是我早些时候开始工作但是用其他两个div打破了一些其他的东西并做了一些改变来解决这个问题但是从那以后我就完全没了无法居中页脚。它只是看起来不对齐左侧或右侧。

我尝试过其他网站的建议，例如将左右边距设置为100％，边距：0自动;除其他事项外。没有什么工作，我的头在旋转。

我应该如何解决这个看似简单的问题？

这是我的页脚，如果它有帮助：

<footer id="footer">
<address>webmaster@mydomain.net</address>
</footer>

我也尝试使用align-text：center inline和我正在使用的外部样式表。在我能够使用外部样式表中的CSS工作之前。然后，我快速地进行了一系列更改，而没有记录我正在做的事情。

请帮帮忙？

Answer 1

如果你想把div放在绝对位置而不是试试这个

#footer {
clear: both;
width:80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left:-40%; /*should be half of footer width and it should be in -margin*/
}

Answer 2

一旦您定义position:absolute;left: 0;，那么margin:0 auto;将无法正常工作..

我认为以下技巧对你有用......

#footer {
  clear:both;
  position: absolute;
    bottom: 0;
    left:50%;
  margin-left: -100px;

}

当您使用position: absolute;时，您无法使用margin:0 auto; ..在这种情况下，left:50%;margin-left: -100px;通常用于水平居中div

示例:: FIDDLE

试图将突破div置于页面底部

2 个答案: