css - CSS：不会以最大宽度居中 div

Question

我有以下页面结构：

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

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

我希望外部 divmain-container拥有max-width: 800px;，内部 div 被包裹在一张桌子上，并与桌子一样。也<div class="content">应该在他的父 div 内居中 - main-container。我在这里做错了什么？jsfiddle

工作示例： jsfiddle

Answer 1

我有一个类似的问题。环境

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

在内部 div 上为我工作。

Answer 2

如果您需要.contentinline -block，只需设置 containertext-align: center和 content 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

您可以使用display: flex，因为它减少了很多 CSS 代码，如下所示；

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

演示

Answer 5

您可以将显示更改为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 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

display: inline-block;从.contentCSS 类中移除

演示

Answer 8

实际上，不采用宽度父级的内联块元素仍然包含宽度，因为内联块元素位于块和非块或内联之间的中间。所以，当你谈论这个元素是 inline-block 时，然后谈论父文本对齐中心。

这里的代码：

答案一：

.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>