Question

HTML和HTML中的一切看起来都很好CSS，所以有问题的div应该以页面为中心。我在下面添加了一些代码段，但真实的代码可以在这里找到：http://jsfiddle.net/stbx08mk/

底部的test-div应该以1024区域为中心，但它不是。为什么不呢？

#page-wrapper {
  background-color: white;
  margin: 0 auto;
  overflow: auto;
  padding: 0;
  width: 1024px;
}

#test-div {
  background-color: orange;
  float: left;
  height: 100px;
  margin: 0 auto;
  width: 800px;
}

Answer 1

#test-div未居中的原因是因为您在CSS中使用了float: left;属性。汽车保证金不适用于浮动元素。

尝试删除float: left;属性以获得所需的结果。

Answer 2

使用display：inline-block和text-align：center。

组合显示浮动div到中心“工作”

首先，删除内部div上的float属性。然后，主外部div上的Text-align:center。对于内部div，display:inline-block。

刚试过它 - 内部div上的display:inline-block有效。也可能明智地给它们明确的宽度。

为您的问题

检查此fiddle

删除float:left;并将clear:both;添加到#test-div。

它对我有用..

这将解决您的问题

试试..

Answer 3

根据您的小提琴，您需要将#test-div样式调整为float: none;和clear: both;

#test-div {
  background-color: orange;
  clear: both;
  float: none;
  height: 100px;
  margin: 0 auto;
  width: 800px;
}

<强> Your JSFiddle Updated

Answer 4

浮动：左边是什么让它忽略你的边距：0自动;

Answer 5

确保您的<html>和<body>代码占据浏览器的整个宽度，边距和填充均为0.这导致我的内容几乎居中，但稍微偏离了中央。使用这个CSS：

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

此外，在#test-div使用中：

#test-div{
    margin: 0 auto;
}

Div应该居中，但事实并非如此？

5 个答案:

检查此fiddle