How to center a div without width?

Question

Hi, I would like to know if a div can be centered without width. due to two different versions of the container, depending on the language settings with different widths, I would like to center it dynamically.

margin: 0 auto; 

not working without any width settings.

therefore the structure is simple:

 <div id="container"> <div id="list"> <span class="up">text large</span> <ul class="navigation"> <li>one</li> <li>|</li> <li>two</li> <li>|</li> <li>three</li> <li>|</li> <li>four</li> </ul> </div> </div> 

and css:

 .wrapper #container { width: 960px; clear: both; margin: 0 auto; } .wrapper #container #list { width: 420px;-->should be dynamically margin: 0 auto; --> only works when setting width } .wrapper #container #list .up { font-size: 11px; float: left; display: inline-block; text-align: right; display: inline; } .wrapper .navigation { font-size: 10px; margin-top: 15px; float: left; padding-left: 5px; } .wrapper .nav li { float: left; display: inline-block; margin-left: 15px; list-style: none; } 

so if there is someone who knows how to deal with this, I would be very grateful.

Thank you very much.

UPDATE:

Thanks for answering this question. via:

display: inline-block;

this container, which needs to be centered, works great.

Answer 1

Use display: inline-block . See fiddle

 .wrapper #container { /* ... */ text-align: center; } .wrapper #container #list { display: inline-block; }