css - 在保留样式的同时居中引导导航栏

Question

如何在此页面上居中导航栏，同时仍保持背景渐变？我已经看到了一些将li设置为 display inline、ato displayinline-block和ul将文本居中对齐的技巧，但这些都需要我添加float:none到代码中，这会破坏我的背景渐变。有人可以阐明一下吗？

Answer 1

在标记中添加两个类（使用可选名称，只是为了覆盖 CSS）。让我们称之为.nav-container和.menu-nav。

      <div class="navbar-inner">
        <div class="container nav-container">
          <ul class="nav menu-nav">
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
          </ul>
        </div>
      </div>

然后添加CSS

.nav-container {
    text-align: center;
}

.menu-nav {
    float: none;
}

我在我的 Chrome 检查器中更改了它，背景渐变看起来和以前一样。