Search code examples
csshtmlcentering

Center a div that is inline-block

I have a .container div that I want to center on the page.

Unfortunately, the div is supposed to fit the table that is in inside. So if the table is at 75% of the page, I want the .container to be at 75% as well.

My .container looks like this:

.container{
  display:inline-block;
  background:#FFF;
  height:500px;
  max-width:80%;
}

I made a JSFiddle here.

Thanks for all help!

Solution

  • Adding text-align:center to the parent of an inline-block element will center it.

    Updated jsFiddle here

    In this case, it would be:

    body {
    text-align:center;
}