html - Bootstrap 导航栏中/上方的中心 Logo

Question

我有下面的代码，它在 Bootstrap 3 导航栏中将 Logo 居中。这工作正常，但实际上我希望 Logo 看起来漂浮在中央导航栏上方，因此导航栏与 Logo 的高度不同。我查看了关于 SO 的类似解决方案，但没有一个能完成我想要完成的事情。

.main-nav-outer {
  padding: 0px;
  border-bottom: 1px solid #dddddd;
  box-shadow: 0 4px 5px -3px #ececec;
  position: relative;
  background: #fff;
}

.main-nav {
  text-align: center;
  margin: 10px 0 0px;
  padding: 0;
  list-style: none;
}

.main-nav li {
  display: inline;
  margin: 0 1px;
}

.main-nav li a {
  display: inline-block;
  color: #222222;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  line-height: 20px;
  margin: 17px 32px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.main-nav li a:hover { 
  text-decoration: none;
  color: #7cc576;
}

.small-logo { 
  padding: 0 32px;
}

.main-section {
  padding: 90px 0 110px;
}

<header class="header" id="header">
  <!--header-start-->
  <div class="container">
    large Hero          
  </div>
</header>

<nav class="main-nav-outer" id="test">
  <!--main-nav-start-->
  <div class="container">
    <ul class="main-nav">
      <li><a href="#header">Home</a></li>
      <li><a href="#service">Services</a></li>
      <li><a href="#Portfolio">Portfolio</a></li>
      <li class="small-logo"><a href="#header"><img src="~/Content/img/wop_small_logo.png" alt=""></a></li>
      <li><a href="#client">Clients</a></li>
      <li><a href="#team">Team</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
  </div>
</nav>

<section class="main-section" id="service">
  <!--main-section-start-->
  <div class="container">
    Bunch o stuff
  </div>
</section><!--main-section-end-->

Answer 1

您的意思是您希望 Logo 居中位于导航栏上方吗？然后你可以像这样编辑你的代码:

.main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    text-align:center;
    margin:10px 0 0px;
    padding:0;
    list-style:none;
}
.main-nav li{
    display:inline;
    margin:0 1px;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{ 
    text-decoration:none;
    color: #7cc576;
}

.small-logo{ 
    padding:0 32px;
}

.main-section{
    padding:90px 0 110px;
}

<header class="header" id="header">
        <!--header-start-->
        <div class="container">
            large Hero          
        </div>
    </header>
<div class="small-logo" style="text-align:center"><a href="#header"><img src="~/Content/img/wop_small_logo.png" alt="logo"></a></div>
    <nav class="main-nav-outer" id="test">
        <!--main-nav-start-->
        <div class="container">
            <ul class="main-nav">
                <li><a href="#header">Home</a></li>
                <li><a href="#service">Services</a></li>
                <li><a href="#Portfolio">Portfolio</a></li>
                <li><a href="#client">Clients</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        </div>
    </nav>

    <section class="main-section" id="service">
    <!--main-section-start-->
    <div class="container">
       Bunch o stuff
    </div>
</section><!--main-section-end-->