Menu
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
951
Technique 1The max-width does exactly what it says, it sets a maximum width for the center content. The margin declaration is what centers the content in the browser window. The "0" sets the top and bottom margin to "0" and the "auto" sets the right and left margin to "auto" which is what actually centers the content.
Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center. The difference between this method and margin: 0 auto is we don't need the width to be specified.
You can use margin:0 auto; to center a div horizontally as long as its width is less than that of the container div.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
I had a similar issue. Setting
margin-left: auto; margin-right: auto; on the inner div worked for me.
103
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
