3列div不能精确居中

我居中居中3个div，但分组偏离大约10-20像素。为什么是这样的，我该如何解决？我正在使用谷歌浏览器。3列div不能精确居中

下面的代码： 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; 

}

在此先感谢。

来源

2012-09-04 Henry-95

HTML代码已经丢失！ – JeanValjean

抱歉，出现了问题，现在显示，尽管您可以使用jsbin链接查看它的外观 –

请告诉我们您使用的浏览器 –

你的问题是在你的容器的宽度。

（25 * 2）+200 = 250

250 * 3 = 750，那么你已经有了一个50像素的权利，在他们左对齐的空白。

只需将容器width: 800px;更改为width: 750px;即可。

来源

2012-09-04 14:41:58 Death

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

来源

2012-09-04 14:40:01

250px x 3 = 750px在800px容器中。
所以当然，这不是中心。

来源

2012-09-04 14:40:22

他们没有完全居中，因为你没有精确居中。

您的容器的总宽度是800像素。三个csect元素的每一个都是200 px + 2 x 25 px宽，所以您的三个元素的总宽度是750 px。

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

来源

2012-09-04 14:40:48 Treb

尝试在容器使用display: inline-block与text-align: center

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

来源

2012-09-04 14:41:40 fcalderan

试试这个：

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

来源

2012-09-04 14:43:20 John

不完全是你正在寻找的答案，而是一个将最有助于你：

在Firefox中安装萤火明白为什么会存在这种差异。
你遇到的问题，别人已经有了。你不需要重新发明轮子。以一个战利品在Twitter的引导或960.gs

现在，你想要的答案：

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

来源

2012-09-04 14:43:57 Michael

3列div不能精确居中

回答

相关问题