如何在 HTML/CSS 中将导航栏的内容居中？答案

【问题标题】：How to center the contents of a navigation bar in HTML/CSS?如何在 HTML/CSS 中将导航栏的内容居中？
【发布时间】：2017-01-13 03:18:20
【问题描述】：

所以我寻找了其他答案，并找到了很多关于调整 #nav 标记以将其更改为显示：inline-block，以及我在类似 SO 问题上找到的所有其他内容，但似乎没有任何效果.这就是它现在的样子。

.navbar {
  margin-bottom: 50px;
  border-radius: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>MANHammer Studios</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Gallery</a>
          </li>
          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Tutorials</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

【问题讨论】：

您有想要实现的布局的线框/模型吗？
Center content in responsive bootstrap navbar的可能重复

标签： javascript html css twitter-bootstrap

【解决方案1】：

添加以下 CSS：

div#myNavbar.collapse.navbar-collapse {
    text-align: center;
}
ul.nav.navbar-nav {
    display: inline-block;
    float: none;
}

Check working JSFiddle

【讨论】：

完美，完全符合我的需要。谢谢！

【解决方案2】：

.navbar{
    text-align: center;
}

大概是你想要的吧？

【讨论】：

我已尝试添加此内容，但它不会使导航栏的内容居中；它们保持左对齐。这同样适用于尝试 align-content 和 align-items。
你检查过引导程序是否不会覆盖这个吗？还是使用 !important 标志？