hello i would like to know if it is possible to center a div without having a width. because of two different versions of a container depending from language settings with different widths i would like to center it dynamically.
margin: 0 auto;
is not working without any settings of width.
so 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 the 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 that i really would appreciate.
thanks alot.
UPDATE:
thanks for answering this question for so far. using:
display: inline-block;
on that container that should be centered works great.
Use display: inline-block
. See fiddle
.wrapper #container {
/* ... */
text-align: center;
}
.wrapper #container #list {
display: inline-block;
}