无法使用引导程序将<ul>居中于导航栏内部

debugcn 发表于 Dev

米塔科瓦尔

我试图中心<ul>导航栏里面<div>有margin: 0 auto;属性，但它不工作。我已经找到了数十种解决方案，但是没有一个起作用。。。这个列表必须是垂直的。

HTML：

<header>
  <div class="container">
    <% link_to '', root_path, id: 'logo' %>
    <a id="nav-toggle" href="#"><span></span></a>
    <div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
      <ul class="nav navbar-nav">
        <li><a href="#speciality">Our speciality</a></li>
        <li><a href="#team">Our team</a></li>
        <li><a href="#workflow">How do we do it</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact us</a></li>
      </ul>
    </div>
  </div>
</header>

CSS：

header {
  width: 100%;

  .container {
    width: 100%;

    #navigation {
      //display: none;
      height: auto;
      background: rgba(0, 0, 0, 0.9);
      width: 100%;

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

        li {
          clear: both;
          display: inline-block;
          padding: 15px;

          a {
            color: $c-text-white;
            font: $font-family-base;
            font-size: 20px;
            text-transform: uppercase;

            &:hover {
              color: $c-text-orange;
            }
          }
        }
      }
    }
  }
}

更新：

解决方案：

Bootstrapnavbar-nav类以某种方式覆盖了我的CSS。因此，删除它并使用Paulie_D的答案中的代码解决了该问题。

保利

ul 是块级，因此默认情况下为100％宽。

如果您成功inline-block申请text-align:center'并向父母申请，那么您应该得到想要的东西。

 #navigation {
        height: auto;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        text-align: center;
        ul {
            text-align: center;
            display: inline-block;
            position: relative;

JSfiddle演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。