Question

如何将此ul标记居中？

我尝试了所有我知道的但没有任何作用（http://jsfiddle.net/alhasen/dmW5F/）。

注意：全屏查看。

请参阅字段集中心的此ul列表。

 <ul id="progressbar">
   <li class="active">First step</li>
   <li>Second step</li>
   <li>Third step</li>
 </ul>

Answer 1

不确定这是否是您想要查看的内容，但请查看：http://jsfiddle.net/dmW5F/1/

无论如何我做的是

删除导致的ul {width:1000px}：

    ul {
        margin: auto auto;
        text-align: center;
        position: relative;
    }

并将#progressbar li更改为：

    #progressbar li {
        list-style-type:none;
        color:#fff;
        text-transform:uppercase;
        font-size:9px;
        width:30%;
        padding-top:10px;
        display:inline-block;
        position:relative
    }

我删除了float:left，添加了display:inline-block，将width更改为width:30%

如果您有任何疑问，请告诉我。干杯！

Answer 2

HTML：

<div class="centered">
    <ul id="progressbar">
         <li class="active">First step</li>
         <li>Second step</li>
         <li>Third step</li>
     </ul>
</div>

CSS：

.centered {
    width: 100%;
    margin: 0;
}
#progressbar {
    max-width: 40%;
    margin: 0 auto;
}
#progressbar li {
    width: 40%;
    margin: 0 30%;
}

请参阅jsFiddle

无法使UL标签居中

2 个答案: