CSS：不會以最大寬度居中div

Question

我有以下頁面結構：

<div class="main-container">
    <div class="content">
        <table>

        </table>
    </div>
</div>

我希望outher div main-container max-width: 800px; 和內部div圍繞一個表，並與表相同。 <div class="content">應該在他的父div - main-container居中。 我在這做錯了什么？ 的jsfiddle

工作示例： jsfiddle

Answer 1

我有一個類似的問題。 設置

margin-left: auto;
margin-right: auto;

在內部div為我工作。

Answer 2

如果您需要.content為內聯塊 ，只需設置容器text-align: center和內容text-align: left 。 您將無法使用margin: auto來居中嵌入塊元素。

Answer 3

我試過這個並且它有效

.element-container{
   width:100%;
   max-width: 700px;
   margin: 0px auto;
}
.element{
   width: 80%;
   max-width: 700px;
   height: auto;
   margin-left: 10%;
}

Answer 4

您可以將顯示更改為table 。 http://jsfiddle.net/4GMNf/14/

CSS

.main-container {
    max-width: 800px;
    margin: auto;
    position: relative;
    background-color: red;
}
.content {
    margin: auto;
    max-width: 600px;
    height: 300px;
    background-color: gray;
    display: table;
}

table 
{
    width: 200px;
}

Answer 5

刪除display: inline-block; 來自.content CSS類

演示

Answer 6

試試這個

http://jsfiddle.net/4GMNf/10/

CSS

.main-container {
    max-width: 800px;
    margin: auto;
    position: relative;
    background-color: red;
}
.content {
    margin: auto;
    max-width: 600px;
    height: 300px;
    background-color: gray;
}
table {
    width: 200px;
}

Answer 7

實際上，一個內聯塊元素沒有采用寬度為父，它仍然是內容寬度，因為內聯塊元素在塊和非塊或內聯之間的中間位置。 所以，當你說這個元素是內聯塊時，然后談談父文本對齊中心。

這里的代碼：

ANS-1：

 .main-container { max-width: 800px; margin: auto; position: relative; background-color: red; text-align: center; } .content { margin: auto; max-width: 600px; height: 300px; background-color: gray; display: inline-block; text-align:left; } table { width: 200px; } 

 <div class="main-container"> <div class="content"> <table> <thead> <tr> <h1>Name</h1> </tr> </thead> <tbody> <tr> <input type="text" Text="" id="txt"> </tr> </tbody> </table> </div> </div> 

答案2：

 .main-container { max-width: 800px; margin: auto; position: relative; background-color: red; } .content { margin: auto; max-width: 400px; height: 300px; background-color: gray; } table { width: 200px; } 

 <div class="main-container"> <div class="content"> <table> <thead> <tr> <h1>Name</h1> </tr> </thead> <tbody> <tr> <input type="text" Text="" id="txt"> </tr> </tbody> </table> </div> </div> 

Answer 8

您可以使用display: flex ，因為它可以減少很多CSS代碼，如下所示;

.main-container {
    display:flex;
    justify-content: center;
}

演示