Search code examples
csshtmlcenter

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

Solution

  • 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.