Centering 4 tables inside a Div

Hi. I have 4 tables inside a Div. These tables are horizontally aligned using float: left; for each table’s class. The html is like:

<div>
    <table class="class1"></table>
    <table class="class2"></table>
    <table class="class3"></table>
    <table class="class4"></table>
    <br style="clear: left;" />
</div>

I tried to use margin: auto; on the div tag, but no success, margin-left and margin-right as auto … because of the float: left all the tables get left aligned. How can I have the 4 tables horizontally aligned and also centered inside the div tag? Thanks in advance!

Hi,

Blocks like a div needs to have a defined width to be centered by auto margins. It also needs to be cleared to contain the floats. CSS tables can do both. They can define their own width, so to say, and clear floats too. (Though you can’t have table cells floated.)

So you could try make the container div a CSS table if it suits the context:

div {
    display: table;
    margin: auto;
}
2 Likes

Thanks Erik_J … just learned a very good lesson by your explanation. Clear and concise. Thank you so much!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.