logo标签列表

CSS：max-width属性下的div无法居中

csshtmlcenter
47

我有以下页面结构：

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

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

我希望 main-container div 的最大宽度为 800px，内部 div 围绕表格，并具有与表格相同的宽度。此外，<div class="content"> 应在其父 div - main-container 中居中对齐。请问我在这里做错了什么？jsfiddle 工作示例：jsfiddle
只需编写 .main-container { text-align: center; }，因为内联块元素的行为介于内联和块之间。 - Md. Abu Sayed
8个回答
81

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

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

对于我来说，在内部div上操作起作用。

1
甚至于在保存div上。 - TheKitMurkit
3
太棒了！之前试过很多建议，只有你的有效了。有时候我真希望在SO上有一个反向悬赏的选项。 ;) - Andreas
1
到了2021年10月，这仍然是最好、最简单的答案，谢谢Gideon！ - tomb
21
如果您需要.content为inline-block，只需设置容器的text-align: center和内容的text-align: left。使用margin:auto将无法使inline-block元素居中。
如果我在.content中有一些文本不想居中，我只想居中整个div，而不影响此div内部的内容，该怎么办？ - Anton Belev
将内容的文本对齐设置为左对齐。 - Adi Ulici
16

我试过这个，它有效果了

.element-container{
   width:100%;
   max-width: 700px;
   margin: 0px auto;
}
.element{
   width: 80%;
   max-width: 700px;
   height: auto;
   margin-left: 10%;
}
5
您可以使用display: flex，因为它可以减少大量的CSS代码，如下所示：
.main-container {
    display:flex;
    justify-content: center;
}

演示

3

你可以将display更改为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;
}
1
尝试这个。

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;
}
内部div的宽度应该取决于表格的宽度。我正在使用dispaly: inline-block来实现这个目标。你的答案在这里不起作用。 - Anton Belev
1
从.content CSS类中删除display:inline-block;。 演示
正如我所说 - 内部div应该与表格具有相同的宽度。我使用dispaly: inline-block来实现这一点。 - Anton Belev
1
实际上，一个inline-block元素即使没有占满父元素的宽度，它仍然保留其内容宽度。因为inline-block元素表现得既像块级元素又像非块级或内联元素之间的中间状态。所以，当你说这个元素是inline-block时，就需要让其父元素text-align:center。
以下是代码：
答案-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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接