html - <ul> 在 div 容器内水平居中

Question

我想将 ul-list 置于 div-container 的中心。 我的代码:

<div class="subnav_wines">
    <ul>
        <li><a href="?sel_regio=4">ToBeDefined</a>
        </li>
        <li><a href="?sel_regio=2">Valpollicella</a>
        </li>
        <li><a href="?sel_regio=1">Veneto</a>
        </li>
        <li id="dd_sort" class="last"><a id="" href="#">Sorted by</a>
        </li>
    </ul>
    <div style="clear:both"></div>
</div>

还有 CSS:

.subnav_wines {
    border-bottom: 1px solid #b58150;
    padding: 0;
    margin-bottom: 0px;
}
.subnav_wines ul {
    padding: 0;
    margin: 0;
    text-align: center;
}
.subnav_wines li {
    float:left;
    padding: 10px 25px 10px 25px;
    margin: 0;
}
.subnav_wines li.last {
    border-right: 0;
    padding: 0;
}
.subnav_wines li a {
    text-transform: uppercase;
    color: #b58150;
    text-decoration: none;
}
.subnav_wines li a:hover {
    border-bottom: 1px solid #b58150;
}
.subnav_wines li a.active {
    border-bottom: 1px solid #b58150;
}

谁能帮帮我？

谢谢。

Answer 1

.subnav_wines li 的 float:left 将列表项推到其父 ul 的左侧。尝试删除 .subnav_wines li 的 float:left 并添加 display:inline-block;

.subnav_wines li  { 
  display:inline-block; 
  padding: 10px 25px 10px 25px;  
  margin: 0; 
}

DEMO