9

我希望 div 水平居中，css代码是这样的：

<style type="text/css">
#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:500px;
            margin: auto;/*left:auto; right:auto;*/
}
</style>

和html代码：

<body>
<div id="footer">hello world</div>
</body>

我认为没有必要解释我的css代码，它几乎是不言自明的，但是div不是水平居中的，有什么办法可以做到这一点？提前致谢。

4

4 回答 4

21

试试这个

#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:80%;
    margin: 0 0 0 -40%;
    left:50%;
}

JS 小提琴示例

这里要注意的一点是，margin-left正好半个值的负值，width并设置left了身体的 50%

于 2013-04-17T11:32:36.807 回答
8

这应该适合你。它通过添加容器 div 来工作。

<style>

#footer-container{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#footer
{
    width:500px;
    margin:0 auto;
    margin-bottom:20px;
    background-color:red;
}
</style>


<div id="footer-container">
      <div id="footer">hello world</div>
</div>
于 2013-04-17T11:37:59.403 回答
6

在其中放置另一个具有相对位置的 div，margin: auto。给固定的一个 100% 宽度。

否则你可以用负边距“技巧”破解它

div { 
    position: fixed;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}
于 2013-04-17T11:30:05.233 回答
4

如果您使用现代浏览器，您可以使用 flexbox 布局模块：http ://caniuse.com/#feat=flexbox 。

Flexbox 文档：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
注意：由于我的代表，不能发布两个以上的链接。

JSF中。

（使用footer标签而不是 adiv#footer因为它更简单。）

<div id="footer-container">
  <footer>hello world</footer>
<div>

#footer-container {
  bottom: 20px;
  position: fixed;

  display: flex;
  justify-content: center;
  width: 100%;
}

footer {
  width: 500px;

  background-color: red;
}

justify-content: center;'centers'#footer-container的孩子，这只是footer本例中的元素。

这与 Nick N. 的解决方案非常相似，只是您不必重置页脚上的text-align属性，而且这可能是您想要的非“技巧”方式。

可接受的解决方案略有偏差，因为在这种情况下页脚的宽度是可变的 (80%) 而不是 500 像素。

对于其他读者，如果您的父级是一个form元素，而子级是一个input元素，flex: 1;请在input(child) 元素上使用，并使用max-width: 500px;而不是width: 500px;. 使用flex: 1;应该使input元素扩展以填充form元素的宽度，否则它可能不会这样做。

于 2014-12-25T05:09:40.773 回答