水平和垂直居中 Bootstrap 导航栏答案

【问题标题】：Centering Bootstrap navbar horizontally and vertically水平和垂直居中 Bootstrap 导航栏
【发布时间】：2016-11-27 09:51:12
【问题描述】：

我是 Bootstrap 的新手，我正在尝试将导航栏水平和垂直居中，所以它看起来像这样但我似乎无法弄清楚。

这是html：

<html>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav"> 
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#pages">Pages</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#mega-menu">Mega menu</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul> 
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
</nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

和 CSS：

nav {
    color: #fff;
    height: 112px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
}

【问题讨论】：

标签： css twitter-bootstrap navbar nav

【解决方案1】：

如果您想使链接居中，您需要将这些规则应用到 .navbar-nav 和 li 类（很可能您也希望在媒体查询中使用这些规则）。

居中链接 CSS

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav > li {
    display: inline-block;
    float: none
  }
}

您可以使用line-height 调整链接的高度，使它们垂直对齐。

垂直链接对齐

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li > a {
    line-height: 4;
  }
}

工作示例：

.navbar.navbar-default {
  background: white;
  border: 1px solid transparent
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a,
.navbar.navbar-default .navbar-search > li > a {
  color: #266080;
}
@media (max-width: 767px) {
  .navbar.navbar-default {
    padding: 15px 0;
  }
  .navbar.navbar-default .navbar-collapse {
    margin-top: 15px;
    margin-bottom: -15px;
    border: 0;
    box-shadow: none;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center {
    width: 100%;
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav.navbar-center > li {
    display: inline-block;
    float: none
  }
  .navbar.navbar-default .navbar-nav.navbar-center > li > a {
    line-height: 4;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
  }
  .navbar.navbar-default .navbar-search {
    position: absolute;
    right: 2%;
    top: 17px;
    line-height: 4;
    font-size: 20px;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="nav">
      <ul class="nav navbar-nav navbar-center">
        <li class="active"><a href="#home">Home</a>
        </li>
        <li><a href="#portfolio">Portfolio</a>
        </li>
        <li><a href="#blog">Blog</a>
        </li>
        <li><a href="#pages">Pages</a>
        </li>
        <li><a href="#features">Features</a>
        </li>
        <li><a href="#mega-menu">Mega menu</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right navbar-search">
        <li><a href="#"><span class="glyphicon glyphicon-search"></span> </a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：