引导导航栏徽标对齐

Question

我在顶部有几个不同的导航，其中一个有主徽标。我正在尝试弄清楚如何使文本和徽标相互对齐，以及如何从导航栏上显示出来。

已编辑

html:

    <header>
        
      <div class="row">
          <div class="container"> 
              <ul id="accnt_nav" class="nav nav-pills pull-right">
                 <li><a href="">Sign in</a></li>
                 <li><a href="">Register</a></li>
                 <li><a href="">My Account</a></li>
                 <li><a href="">Wholesale</a></li>
                 <li>Contact Us:<a href="#contact">info@healinghomefoods.com</a></li> 
              </ul>
          </div>                     
      </div>

    <div class="container">  
      <div class="row">      
           <ul class="nav nav-pills pull-right">
               <li><a href="">Search</a></li>
               <li><a href="">Cart</a></li>
           </ul>
      </div>
  </div>
     
     <div class="row">
         <div class="container">
              <ul id="header-nav" class="nav nav-pills">
                  <li class="">
                      <a href="#" class="logo-link"> <img class="logo" src="http://placehold.it/150/3498db/fff"></a>
                  </li>
                  <li><a href="">shop online</a></li>
                  <li><a href="">ingredients</a></li>
                  <li><a href="">locations</a></li>
                  <li><a href="">faq &amp; info</a></li>
                  <li><a href="">about us</a></li>
              </ul>
        </div>
     </div>
      
  </header>

css:

html {
  font-family: georgia;
}

a {
  background: transparent;
}

a:active, a:hover {
  outline: 0;
}

header{
  background-color: #efe3d0;
  -moz-box-shadow: 0px 5px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 5px rgba(0,0,0,0.2);
  box-shadow: 0px 5px 1px rgba(0,0,0,0.2);

}

#header-nav {
  color: #694220;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top:80px;
  margin-bottom: -55px;
}

#header-nav a {
  color: #694220;
}


.logo { border-radius: 100%; }
.logo-link { margin-top:-65px; }

/*Overrides */

ul.nav a:hover { 
   background-color: rgba(255, 255, 255, .1);
}

.nav-pills > li +li::before {
    content: " | ";
}

#accnt_nav > li:last-child {
  margin-left: 26px;
  width:300px;
}

.nav-pills > li > a {
  display: inline-table;
}

这是我的理想目标。

Bootply Link: revised

Answer 1

我在 #header-nav 中写了这个 margin-top:80px;

和

.logo-link 中的 margin-top:-80px; 使其工作。

在这里您可以看到结果 http://www.bootply.com/TcNx2mtwix 。实际上 Search & Cart 没有与#header-nav 正确分离，所以我使用了 margin-top:80 来实现它。

Answer 2

One quick solution 将添加一个bottom 属性到.logo：

.logo {
    border-radius: 100%;
    bottom: 65px;
    position: relative;
}

.logo-link {
    margin-bottom: -75px;
}