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

Question

I've got the following page structure:

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

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

I want the outher div main-container to 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

Working example: jsfiddle

Answer 1

I had a similar issue. Setting

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

on the inner div worked for me.

Answer 2

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

Answer 3

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

Answer 4

You could just change display to 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

Remove display: inline-block; from .content CSS class

Demo

Answer 6

try this

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

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.

Here the code:

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> 

Ans 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

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

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

Demo