Question

Hi I have a container in witch there will be added multipe elements so I don’t really know what the width of the container will be because the elements are added dynamicly.I need this container to be centered so I figure that I should use display:inline-block to make the div width and height to be set acording to it’s elements but after I use this the property margin:0 auto does not work anymore.This is a simple example of what I am trying to achive:

<div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>


div{
      display:inline-block;
      margin:0 auto;
}

No matter how many elements are in that container I want it to be centered.My curent atempt does not work so how can I center this container?

Answer 1

You can do it by adding a wrapper div that has display block and setting text-align:center to it:

<div id="wrapper">
    <div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>
</div>​

div#wrapper{
    text-align:center; 
    display:block;    
}
div{
      display:inline-block;
      margin:0 auto;
}​

see this fiddle.