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不能精確居中

回答

相關問題