bootstrap导航栏徽标对齐

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。实际搜索＆amp;购物车没有与＃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;
}