Html 如何在水平居中的导航链接旁边对齐徽标？

在过去的几个小时里，我一直在努力将我的徽标定位在响应导航栏中居中导航链接的右侧。在没有任何运气的情况下，尝试了几十种方法让它工作。我保留了导航栏的大部分CSS；引导3。任何援助都将是巨大的 谢谢！网站链接为：

非常感谢

切换导航 未来青年记录 您的html有未关闭的div、额外的div、错误的类和许多问题。最好按照GetBootstrap.com上的示例进行操作，并对代码进行注释和缩进。当您遇到需要帮助的问题时，请始终努力使用干净、有效的html，并遵循以下文档

引导的.navbar非常具体，它是左或右，仅此而已。你必须了解CSS和定位等，才能改变它。您还必须精通响应式CSS，并且能够非常流利地使用引导式CSS

这不是成品。在这种情况下，导航栏的高度取决于最高的子项徽标的高度。徽标的高度为60px，顶部和底部有10px的填充物，链接的第一个子项上有80px的线条高度，用于使其在其中居中。否则会有更多的CSS需要创建

演示： HTML:

---

请共享html您希望未来青年唱片的徽标出现在那里，而不是社交媒体链接，如FB、Twitter？感谢您的回复，立即添加html。我刚刚上传了一张图片，展示了我希望它看起来如何。。。www.futureyouthrecords.org/test002.png标识、链接和社交图标均应居中；当导航栏折叠时，只显示徽标，链接和社交应该成为切换导航的一部分。我很确定我可以得到正确的社交链接，但是这个标志让我完全困惑。提前谢谢。非常感谢你花时间编写代码克里斯蒂娜，我真的很感激！我想我现在对它有了更好的理解，并且肯定会为将来的任何请求清理代码。酷。请选择它作为答案，以便其他人可以找到它。

<!-- Fixed navbar -->
<nav class="navbar-center navbar-inverse navbar-fixed-top" role="navigation" id="nav">
   <div class="container">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <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="logo" href="indexalt.html">
      <img src="http://placehold.it/60x60/ffffff/000000&text=LOGO">
      </a>
      <div id="navbar" class="my-collapse collapse">
         <ul class="navbar-center navbar-nav nav">
            <li>
               <a href="OurTeam.html">NEWS</a>
            </li>
            <li class="dropdown">
               <a href="AboutUs.html" class="dropdown-toggle"  data-toggle="dropdown">ABOUT US <span class="caret"></span></a>
               <ul class="dropdown-menu">
                  <li><a href="OurTeam.html">Our Team</a>
                  </li>
                  <li><a href="#">Mission</a>
                  </li>
                  <li><a href="#">Contact</a>
                  </li>
               </ul>
               <!--/.dropdown-menu -->
            </li>
            <li><a href="#">PROJECTS</a></li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA <span class="caret"></span></a>
               <ul class="dropdown-menu">
                  <li><a href="#">Audio</a>
                  </li>
                  <li><a href="#">Video</a>
                  </li>
                  <li><a href="#">Photos</a>
                  </li>
                  <li><a href="#">Enter Download Code</a>
                  </li>
               </ul>
               <!--/.dropdown-menu -->
            </li>
            <li><a href="#">DONATE</a>
            </li>
         </ul>
         <!-- /ul.navbar-center -->
      </div>
      <!--/.my-collapse collapse -->
      <div class="social-links clearfix">
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
         <a href="#">
         <img src="http://placehold.it/64x64/ffffff/000000&text=X">
         </a>
      </div>
      <!--/.social-links -->
   </div>
   <!--/.container -->
</nav>
<!-- /nav.navbar-center -->

nav.navbar-center.navbar-inverse {
    background: #000
}
.navbar-center .social-links a {
    width: 32px;
    height: 32px;
    float: left;
    padding-right: 5px;
}
nav.navbar-center .social-links {
    float: left;
    padding: 27px 0 10px 0;
}
nav.navbar-center img {
    max-width: 100%;
    height: auto;
}
nav.navbar-center .logo {
    float: left;
    padding: 10px 20px 10px 0;
}
.navbar-inverse button.navbar-toggle {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 10px;
    width: 50px;
    height: 80px;
}
.navbar-inverse button.navbar-toggle .icon-bar {
    width: 100%;
    display: block;
    margin: 5px 0;
    height: 3px;
    border-radius: 0;
    background:#fff;
    border:0px;
    padding: 0;
}
@media (max-width:767px) { 
    nav.navbar-center .my-collapse {
        clear: both;
        padding: 10px 0;
    }
}
@media (min-width:768px) { 
    nav.navbar-center img {
        width: 100%;
        height: auto;
    }
    nav.navbar-center .container {
        text-align: center;
        max-width: 980px;
    }
    #navbar.my-collapse.collapse {
        visibility: visible;
        display: inline-block;
    }
    ul.navbar-center > li > a {
        padding: 0 15px;
        line-height: 80px;
    }
    nav.navbar-center .logo {
        padding: 10px 0 10px 0;
        text-align: left;
        float: left;
    }
    nav.navbar-center .social-links {
        line-height: 80px;
        float: right;
        padding: 0;
    }
}