中心2個div（浮動左，右）在一個容器中

Question

我嘗試了多種方法在這個網站上找到，似乎沒有任何幫助。

我想中心在容器中有100％寬度左右浮動的2個div。

CSS代碼段：

#body-container { 
    background: none; 
    height: 100%; 
    width: 100%; 
    margin: 0 auto; 
} 

    #body-inner { 
    float: left; 
    width: 550px; 
    left: 325px; 
    margin: 0 auto; 
    background: none; 
    padding-top: 3%; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-left: 1px solid #000000; 
    border-right: 1px solid #000000; 
} 

#bodybox { 
    margin: 0 auto; 
    width: 200px; 
    height: 100%; 
    right: 325px; 
    background: none; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 
} 

Answer 1

Could this be what you're looking for? Click here...

如果我理解你的問題，你要居中<div>有2個<div>父母......

代碼代碼段：

#body-container { 
    background: none; 
    height: 100%; 
    width: 100%; 
    /*margin: 0 auto;*/ 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 500px; 
} 
#body-inner {  
    width: 550px; 
    margin: 0 auto; 
    background: none; 
    padding-top: 3%; 
    padding-left: 10px; 
    padding-right: 10px; 
    /*border-left: 1px solid #000000; 
    border-right: 1px solid #000000;*/ 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 400px; 
} 
#bodybox { 
    margin: 0 auto; 
    width: 200px; 
    height: 100%; 
    /*right: 325px;*/ 
    background: none; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 400px; 
} 

Answer 2

你需要做一些關於浮動工作的研究，因爲我認爲你有錯誤的想法。浮動一個div左邊和一個右邊，沒有辦法居中他們，因爲他們漂浮。 left和right屬性不起作用，除非元素被定位（絕對，固定或相對於某些含義）。此外，它看起來像你試圖讓#bodybox的右邊緣與#body-inner的左邊緣對齊。這不起作用，因爲right屬性是從屏幕的右邊緣計算的，而不是左邊緣。此外，您將固定的盒子尺寸與流體容器寬度混合在一起。這很好，如果你說明他們碰撞時會發生什麼。

如果您只是試圖將兩個<div>彼此對齊，並居中顯示在頁面上。在這種情況下，inline-block可能是你的朋友。有許多影響和解決辦法的有關空白，字體大小，內容順序等，但本質上，你會怎麼做：

#body-container { 
    width: 100%; 
    text-align: center; 
} 
#body-inner { 
    width: 550px; 
} 
#bodybox { 
    width: 200px; 
} 

在上面，兩個<div> s就只要彼此相鄰坐容器足夠寬，一旦容器太小，它們將一個在另一個之前顯示，每個集中在容器中。