如何将导航栏中的所有内容居中答案

【问题标题】：How to center everything inside navbar如何将导航栏中的所有内容居中
【发布时间】：2017-12-07 03:25:57
【问题描述】：

我想在引导导航栏中将所有内容居中，这是我的代码：

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

我想用“container-fluid”类使 div 居中，我尝试在这个 div 中添加“margin: 0 auto; float:none”，但它不起作用我添加了这个：

.container-fluid {
      margin: 0 auto !important;
      float: none !important;
    }

还是不行

【问题讨论】：

有时你必须添加 !important 来覆盖引导样式。前任。 margin: 0 auto !important;。尝试一些事情并报告您的尝试。

标签： css twitter-bootstrap

【解决方案1】：

您可以添加.navbar { display: flex; } （那么就不需要其他 CSS 了）

https://codepen.io/anon/pen/YEbrPz

【讨论】：

【解决方案2】：

解决这个问题的最简单方法是从第一个 nav 和 div 标签中删除类，然后添加中心标签。

<nav>
 <center>
  <div>
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
  </center>
</nav>

【讨论】：

那些外部类在 Bootstrap 中是必不可少的，<center> 已被弃用。

【解决方案3】：

或者制作固定宽度的包装器（如果导航栏没有改变很多）。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="wrap" style="
    margin: 0 auto;
    width: 550px;
">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    </div>
  </div>
</nav>

【讨论】：

【解决方案4】：

问题是.navbar-header 和.navbar-brand 都是float:left，所以你需要明确地覆盖它。然后，您可以通过将它们更改为 display:inline-block 并将 .text-center 类添加到它们的容器来将它们居中。

.navbar .text-center > * {
    float: none;
    display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
  <div class="container-fluid text-center"> <!-- added text-center class here -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

【讨论】：