如何使用CSS居中兩列？

我試圖在我的網站中心放置兩列，但也有一些問題。每一個變化的結果都是左邊的位置。我究竟做錯了什麼？更多關於圖片。如何使用CSS居中兩列？

body { 
    background - image: url("../img/gray.png"); 
} 

#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background: #cc0000; 
    text - align: center; 
} 

#wrapper { 
    margin: 100px; 
    width: 1280px; 
} 

#leftcolumn { 
    float: left; 
    background - image: url("../img/gray.png"); 
    margin: 10px 0px 10px 0px; 
    padding: 10px; 
    height: 682px; 
    width: 460px; 
} 

#rightcolumn { 
    float: left; 
    color: #333; 
    border: 1px solid # ccc; 
    background: #F2F2E6; 
    margin: 10px 0px 10px 0px; 
    padding: 10px; 
    height: 500px; 
    width: 439px; 
    display: inline; 
    position: relative; 
}

website http://i46.tinypic.com/5tov7.jpg 感謝

來源

2013-02-11 Fastkowy

請提供一個jsfiddle或類似的東西。可能需要使用「自動」水平頁邊距。 – 2013-02-11 15:04:18

由於兩列的寬度小於包裝的寬度（即959px VS 1280px），你需要兩列放置一個固定寬度的容器內：

<div id="wrapper"> 
    <div id="column_container"> 
     <div id="column1"></div> 
     <div id="column2"></div> 
    </div> 
</div>

然後做例如：

#column_container { 
    width: 959px; 
    margin: 0 auto; 
}

來源

2013-02-11 15:16:05 BenM

爲中心。但應該像@ mookamafoob提到的那樣，margin：100px auto – Fastkowy 2013-02-11 15:19:41

'＃wrapper'元素已經有一個空白了。除此之外，還應該使用這個。請參閱最新的答案。 – BenM 2013-02-11 15:20:10

啊，好的。我明白了;） – Fastkowy 2013-02-11 15:20:56

沒有看到直播，這樣的事情應該工作：

#wrapper { 
    width: 1280px; 
    margin:100px auto ; 
}

但正如已經提到的，這隻會中心#wrapper。列不填充整個1280寬度，所以它們仍然在#wrapper左對齊。

來源

2013-02-11 15:12:43 gotohales

@Fastkowy你可以通過'text-align：center;'來做到這一點，因此#wrapper中的內容將以 – 2013-02-11 15:16:23

如何使用CSS居中兩列？

回答

相關問題