Question

是否可以垂直和水平居中导航栏？

/**
 * Logo.
 */
.button-logo {
    font-family: 'Monoton', cursive;
    font-weight:normal;
    font-size:40px;
    font-weight: 300;
    line-height: 40px;
    letter-spacing: 1px;
}

.button-logo:hover {
    text-decoration: none;
}

.button-logo span {
    display: block;
    clear:both;
    color: #000;
}

/**
 * Centerise the logo.
 */
.navbar-header {
    float: left;
    text-align: center;
    width: 100%;
}

.navbar-brand {
    float:none;
}

/**
 * Centerise the navbar.
 */
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

/**
 * Remove default background, radius, etc.
 */
.navbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    border: 0;
    background: none;
    box-shadow: none;
    margin-bottom: 0;
}

.navbar-default .navbar-nav > li > a {
    font-family: 'Monoton', cursive;
    font-size: 25px;
    letter-spacing: 2px;
    color: #000;
    color: rgba(0, 0, 0, 0.5);
    padding-bottom: 0 !important;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #000;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: none;
    background: none;
    box-shadow: none;
    color: #000;
}

<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand button-logo" href="#">
                <span>brand</span>
                <span>brand</span>
                <span>brand</span>
            </a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">

            <!-- menu-box -->
            <div class="menu-box">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <!-- menu-box -->

        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

但这只会使导航栏水平居中而不是垂直。

有什么想法吗？

jsfiddle

Answer 1

要将导航栏放在屏幕中央，只需添加

即可

nav {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/anpvtaxu/1/

Answer 2

如果Igot你的问题是正确的：

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

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

 </div>

<强> [UPDATE]
上面是水平中心;如果你想让它垂直居中，请使用：

top:50%;

在你想要的每个元素中垂直居中。

bootstrap navbar center垂直水平？

2 个答案: