gte_ gte_ - 4 months ago 11
HTML Question

How to horizontally center table inside div?

I have a

<table>
inside a
<div>
, with the styling below, the table is not being centered, why?

Shouldn't everything within the
<div>
be formatted like I styled in the CSS?

HTML

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


CSS

div{
border: 5px solid white;
border-radius: 5px;
margin: auto;
text-align: center;
}

Answer

You are setting margin: auto on the div, so the div will be centred … however you have also left the div as width: auto so it will be as wide its container (once you account for margins, padding and borders).

You are setting text-align: center on the div, so the inline children of the div will be centred, but the table is not inline, so it isn't affected (some of the table cells contents might be, depending on inheritance).

If you want to centre the table then you have to centre the table itself.

table { margin: auto; }