html - 容器中的中心无序列表

Question

我正在使用 bootstrap v3 并尝试在容器中心对齐无序列表。由于某种原因，它没有正确居中

这是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 组合的面积。