在一個div中居中一個div，並根據內部div將外部div自動調整

現在我可以自動調整容器div到內部div的大小，或者我可以居中整個事情......但是我無法確定瞭解如何同時做到這一點。在一個div中居中一個div，並根據內部div將外部div自動調整

下面是CSS /佈局，因爲我有它。目前，page和main元素都居中，但如果內容超過一定的大小，它將在沒有任何元素重新調整大小的情況下越過邊界。

LAYOUT

</head> 
    <body> 
     @using Monet.Common 
     <div id="contentContainer"> 
      <div class="page"> 
       @Html.Partial("NavBarPartial") 
       <section id="main"> 
        <div id="content"> 
         @RenderBody() 
        </div> 
        <div id="footer"> 
         <span style="color: Gray;"> </span> 
        </div> 
       </section> 
      </div>    
     </div>  
    </body> 
</html>

CSS

#contentContainer { 
    width: 100%;  
} 

.page 
{ 
    width: 50%; /*1030px;/*75em;/*83.7em;*/ 
    margin-left: auto; 
    margin-right: auto; 
} 

#content { 
    padding: 20px; 
} 


#main 
{ 
    width:auto; 
    display:block; 
    height: auto; 
    background-color: white; 
    /*border: 1px solid #999;*/ 
    border-radius: 5px 10px/10px; 
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 

} 



footer, 
#footer 
{ 
    /*background-image: url('Images/TEST2body_bot.png');*/ 
    background-color: #fff;  
    background-repeat: no-repeat; 
    color: #999; 
    padding: 10px 0; 
    text-align: center; 
    line-height: normal; 
    margin: 0 0 30px 0; 
    font-size: .9em; 
    border-radius: 0 0 4px 4px; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
}

EDIT

時遇到的問題是最佳地示出瓦特/兩個例子。在一個例子中，我有一張1030像素寬的桌子。該表格完全左對齊，但表格的右邊緣遠遠超出main元素的右邊界。

另一個問題是有一組單選按鈕。當頁面加載時，應該只是按鈕右側的空白區域。根據用戶的選擇，單選按鈕右側會出現一個特定的菜單。當頁面加載它看起來像只是足夠的空間的菜單，但他們加載UNDERNEATH單選按鈕，而不是他們的權利。

第二個編輯

這是一個讓我自動大小div的CSS，但是一切都左對齊（註釋掉某些章節，並添加display: inline-block和overflow: auto到.page）。

/*#contentContainer { Had to comment this whole section out 
    width: 100%;  
}*/ 

.page 
{ 
    /*width: 50%; /*1030px;/*75em;/*83.7em; Needed to comment this attribute as well*/ 
    display: inline-block; 
    overflow: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 

#main 
{ 
    height: auto; 
    display:block; 
    height: auto; 
    background-color: white; 
    /*border: 1px solid #999;*/ 
    border-radius: 5px 10px/10px; 
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 

}

來源

2013-12-10 NealR

你可以搗鼓這個..？ – Neha

@Neha這裏是一個小提琴：http://jsfiddle.net/YA2Ns/ –

嗯，我也做了小提琴，但在#content和#footer上添加了虛擬文本，它保留在盒子裏..所以想知道這是一個什麼樣的尺寸正在打破..如果你可以在小提琴中表現出問題，它將是gr8。 – Neha

您需要的父元素設置爲

display: table-cell; 
vertical-align: middle; 
text-align: center; 
#and some kind of height: 
height: 350px;

的＃頁面的div：

display: inline-block;

像這樣： http://jsfiddle.net/YA2Ns/1/

來源

2013-12-10 23:19:26 gagge

這確實讓所有事情都變得糟糕起來，不幸的是仍然是左對齊的。 'display：inline-block'雖然在'.page'元素中允許一切都自動調整大小。 – NealR

此外，'text-align：center'使站點（每個頁面）上的*所有*都居中。 – NealR

別問我爲什麼，但更改添加display:table和margin: 0 auto到.page元素工作。我實際上不再需要contentContainer div了。這是最終產品。

CSS

.page 
{ 
    display: inline-block; 
    overflow: auto; 
    display: table; 
    margin: 0 auto; 
} 

#main 
{ 
    height: auto; 
    display:block; 
    height: auto; 
    background-color: white; 
    /*border: 1px solid #999;*/ 
    border-radius: 5px 10px/10px; 
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); 
} 
#content { 
    padding: 20px; 
} 

footer, 
#footer 
{ 
    /*background-image: url('Images/TEST2body_bot.png');*/ 
    /*background-color: #fff; */ 
    background-repeat: no-repeat; 
    color: #999; 
    padding: 10px 0; 
    text-align: center; 
    line-height: normal; 
    margin: 0 0 30px 0; 
    font-size: .9em; 
    border-radius: 0 0 4px 4px; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
}

佈局

<body> 
    @using Monet.Common 
    <div class="page"> 
     @Html.Partial("NavBarPartial") 
     <section id="main"> 
      <div id="content"> 
       @RenderBody() 
      </div> 
     </section> 
    </div>   
    <div id="footer"> 
     <span style="color: Gray;"></span> 
    </div>   
</body>

來源

2013-12-10 23:41:14 NealR

在一個div中居中一個div，並根據內部div將外部div自動調整

回答

相關問題