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上为我工作。

答案 1 :(得分：13)

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

答案 2 :(得分：9)

我试过这个并且有效

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

答案 3 :(得分：3)

您只需将显示更改为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;
}

答案 4 :(得分：0)

从display: inline-block; CSS类

中删除.content

Demo

答案 5 :(得分：0)

试试这个

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

答案 6 :(得分：0)

实际上，内联块元素未采用其宽度父级，但仍包含宽度，因为内联块元素在块与非块或内联之间居中。因此，当您说此元素是内联块时，请说说父文本对齐中心。

以下代码：

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>

答案 7 :(得分：0)

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

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

Demo

Answer 2

如果您需要.content inline-block ，只需设置容器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; 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

实际上，内联块元素未采用其宽度父级，但仍包含宽度，因为内联块元素在块与非块或内联之间居中。因此，当您说此元素是内联块时，请说说父文本对齐中心。

以下代码：

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

Demo

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

8 个答案:

CSS