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

CSS: Won't center div with max-width

提问by Anton Belev

I've got the following page structure:

我有以下页面结构：

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

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

I want the outher div main-containerto have max-width: 800px;and the inner div to be wrapped around a table and to have the same with as the table. Also <div class="content">should be centered inside his parent div - main-container. What am I doing wrong here? jsfiddle

我想outher DIVmain-container有max-width: 800px;和内div来围着一张桌子包裹，并具有相同的使用作为表。也<div class="content">应该集中在他的父 div - 内main-container。我在这里做错了什么？提琴手

Working example:jsfiddle

工作示例：jsfiddle

采纳答案by Adi Ulici

If you need the .contentto be inline-block, just set the container text-align: centerand the content text-align: left. You won't be able to center inline-blockelements using margin: auto.

如果你需要的.content是inline-block的，只需设置容器text-align: center和内容text-align: left。您将不能中心inline-block的使用元素margin: auto。

回答by Gideon Rosenthal

I had a similar issue. Setting

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

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

on the inner div worked for me.

在内部 div 上为我工作。

回答by user3438645

I tried this and it worked

我试过了，它奏效了

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

回答by thgaskell

You could just change display to table. http://jsfiddle.net/4GMNf/14/

您可以将显示更改为table. http://jsfiddle.net/4GMNf/14/

CSS

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

回答by Dhaval Marthak

Remove display: inline-block;from .contentCSS class

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

Demo

演示

回答by Falguni Panchal

try this

尝试这个

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

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

CSS

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

回答by Md. Abu Sayed

Actually,an inline-block element not taken width parent it still contents width, Because a inline-block element behive the middle between block and non-block or inline. So, When you talk this element is inline-block then talk the parent text-align center.

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

Here the code:

这里的代码：

Ans-1:

答案-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>

Ans 2:

答案 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>

回答by Usman Developer

You can use display: flex, because it reduces much CSS code as you can see below;

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

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

Demo

演示