CODEWITHSUNDEEP
csshtmlcenter
Anton Belev
Anton Belev

Reputation: 13563

CSS: Won't center div with max-width

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

Upvotes: 48

Views: 72282

Answers (8)

Adi Ulici
Adi Ulici

Reputation: 1295

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.

Upvotes: 22

Usman Developer
Usman Developer

Reputation: 578

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

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

Demo

Upvotes: 6

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

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>

Upvotes: 1

Gideon Rosenthal
Gideon Rosenthal

Reputation: 2033

I had a similar issue. Setting

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

on the inner div worked for me.

Upvotes: 86

user3438645
user3438645

Reputation: 171

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

Upvotes: 17

thgaskell
thgaskell

Reputation: 13236

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

Upvotes: 3

Falguni Panchal
Falguni Panchal

Reputation: 8981

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

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Demo

Upvotes: 1

Related Questions