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

Question

我有以下页面结构：

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

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

我希望外部div main-container有max-width: 800px;和内部div围绕一个表，并与表相同。 <div class="content">也应该在他的父div - main-container中心。我在这做错了什么？ jsfiddle

工作示例：jsfiddle

Answer 1

如果你需要.content是内联块，只需设置容器text-align: center和内容text-align: left。您将无法使用margin: auto将内联块元素居中。

Answer 2

我有一个类似的问题。设置

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

在内部div为我工作。

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; CSS类中删除.content

Demo

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

实际上，一个内联块元素没有采用宽度为父，它仍然是内容宽度，因为内联块元素在块和非块或内联之间的中间位置。所以，当你说这个元素是内联块时，然后谈谈父文本对齐中心。

这里的代码：

年-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;
}

Demo