您好,我想知道是否可以在没有宽度的情况下将 div 居中。由于容器的两个不同版本取决于具有不同宽度的语言设置,我希望将其动态居中。
margin: 0 auto;
没有任何宽度设置就无法工作。
所以结构很简单:
<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>
和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;
}
因此,如果有人知道如何处理,我将不胜感激。
多谢。
更新:
感谢您到目前为止回答这个问题。使用:
显示:内联块;
在应该居中的容器上效果很好。