Question

我有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;

}

提前致谢。

Answer 1

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

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

现在你想要的答案：

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

Answer 2

在800px容器中

250px x 3 = 750px 所以当然，它不是集中的。

Answer 3

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

（25 * 2）+200 = 250

250 * 3 = 750，所以你的右边距离是50px，它们是左对齐的。

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

Answer 4

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

Answer 5

它们并不完全居中，因为你没有完全居中。

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

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

Answer 6

尝试在容器

上使用display: inline-block和text-align: center

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

Answer 7

试试这个：

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

3列div不完全居中

7 个答案: