中心容器中的无序列表

Question

我正在使用bootstrap v3＆amp;尝试将无序列表对齐到容器的中心。出于某种原因，它没有正确居中

这里是html

 <!-- Page Content -->
    <div class="container" style="border: 1px solid red">
        <div class="row">
            <div class="col-lg-12">
              <ul id="tabs">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->

和css

ul#tabs {
    display: block;
    margin: 0 auto;
}

ul#tabs li{
    float: left;
    border: 1px solid red;
    width: 180px;
    height: 80px;
    padding:0;
    margin:0;
}

我做错了什么？

Answer 1

margin: 0 auto;不会将没有指定宽度的元素居中，因为display:block会使元素占用所有可用的水平空间。

由于li是固定宽度，您可以尝试：

ul#tabs {
    display: block;
    text-align:center;
}

ul#tabs li{
    display:inline-block;
    border: 1px solid red;
    width: 180px;
    height: 80px;
    padding:0;
    margin:0;
}

http://jsfiddle.net/01fLnf28/

请注意，ul仍然与其父级一样宽，因此如果您需要ul上仅包含合并区li的背景，则可能不是最佳解决方案。 1}} S上。