0

我将 3 个 div 居中，但分组偏离中心约 10-20 像素。为什么会这样，我该如何解决？我正在使用谷歌浏览器。

这是代码： jsbin

或者您可以查看以下代码：
HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="container">
    <div class="csect"></div>
    <div class="csect"></div>
    <div class="csect"></div>

    </div>
</body>
</html>

CSS：

#container
{
    width: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.csect
{
    display: inline;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #E0E0E0;
    width: 200px;
    height: 200px;

}

提前致谢。

4

7 回答 7

3

不完全是您正在寻找的答案，但最能帮助您的答案：

  • 在 firefox 中安装 firebug 以了解为什么会有这种差异。
  • 你遇到的问题，别人已经遇到了。你不需要重新发明轮子。在 Twitter Bootstrap 或 960.gs 上掠夺

现在你想要的答案：

你的#container 有 800 像素。.csect 有 25px + 200px + 25px = 250px。250 x 3 = 750 像素。您缺少 50px :) 如果您将 #container 更改为 750px 或为第一个 csect 添加更多边距，您将使其居中。

于 2012-09-04T14:43:57.927 回答
2

250 像素 x 3 = 800 像素容器中的 750 像素。
所以当然，它不是居中的。

于 2012-09-04T14:40:22.163 回答
2

您的问题在于容器的宽度。

(25*2)+200 = 250

250*3 = 750，所以右边有 50px 的间隙，它们在左边对齐。

只需将容器更改width: 800px;为width: 750px;，就可以了。

于 2012-09-04T14:41:58.533 回答
1

我通常将 margin-left 值设置为 div 宽度的一半像素，以使其在所有浏览器中看起来都相同。

于 2012-09-04T14:40:01.800 回答
1

它们没有完全居中，因为您没有将它们完全居中。

容器的总宽度为 800 像素。三个 csect 元素中的每一个都是 200 px + 2 x 25 px 宽，因此三个元素的总宽度为 750 px。

将容器宽度设置为 750 像素，它们应该正好在中心。

于 2012-09-04T14:40:48.980 回答
1

尝试在容器上使用display: inline-blockwithtext-align: center

示例http://jsbin.com/ibufoc/1/edit

于 2012-09-04T14:41:40.360 回答
1

试试这个：

.csect {
    background-color: #E0E0E0;
    display: inline-block;
    height: 200px;
    margin-left: 25px;
    margin-right: 25px;
    width: 200px;
}
于 2012-09-04T14:43:20.923 回答