Question

如何将此导航栏设为中心？

我认为类菜单是使用bootstrap.min.css构建的。

#header {
  position: fixed;
  width: 100%;
  z-index: 999;
}
#header .header-content {
  margin: 0px auto;
  max-width: 1170px;
  padding: 60px 0;
  width: 100%;
  -moz-transition: padding 0.4s;
  -o-transition: padding 0.4s;
  -webkit-transition: padding 0.4s;
  transition: padding 0.4s;
}
.navigation {
  float: right;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  color: white;
  font-size: 15px;
  font-weight: bold; /* Normal - Bold - 400 */ 	
  margin-left: 30px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
  color: white;
}

<header id="header">   
  <div class="menu">
    <div class="header-content clearfix">
      <nav class="navigation" role="navigation">
        <ul>
          <li><a data-scroll href="#sec1">Inicio</a></li>
          <li><a data-scroll href="#sec2">UEFA</a></li>
          <li><a data-scroll href="#sec4">Equipo</a></li>
          <li><a data-scroll href="#sec3">Contacto</a></li>
        </ul>
      </nav>
        <a href="#" class="nav-toggle">Menu<span></span></a>
    </div>
  </div>
</header>

Answer 1

如果您从float: right移除.navigation并将text-align: center设置为该div，则可以将其居中。

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

如何使Bootstrap导航栏居中

1 个答案: