在过去的几个小时里，我一直在努力将我的 Logo 定位在响应式导航栏中居中导航链接的右侧。尝试了数十种方法来使它正常工作但没有任何运气。我保留了 Navbar 的大部分 CSS； BootStrap 3. 任何帮助都会非常有用 赞赏!网站链接是:
非常感谢!
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<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="navbar-brand" href="indexalt.html">
<img src="data2/test5.png" width="61" height="48">
</a>
<div class="navbar-text"> <span class="FutureFont">Future Youth <span style="color:#ee1b04; font-size: 16px;">R</span>ecords</span>
</div>
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="OurTeam.html">NEWS</a>
</li>
<li class="dropdown">
<a href="AboutUs.html" class="dropdown-toggle">ABOUT US</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>
</li>
<li><a href="#">PROJECTS</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA</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>
</li>
<li><a href="#">DONATE</a>
</li>
</ul>
</span>
<div class="sociallinks pull-right">
<a href="">
<img id="aks" src="data2/FB1.png" width="32" height="32">
</a>
<a href="">
<img id="akst" src="data2/Twitter1.png" width="32" height="32">
</a>
<a href="">
<img id="aksy" src="data2/youtube1.png" width="32" height="32">
</a>
</span>
</div>
</div>
<!--/.nav-collapse -->
</div>
</nav>最佳答案
您的 html 包含未关闭的 div、额外的 div、错误的类和许多问题。最好完全按照 GetBootstrap.com 上的示例进行操作，并注释和缩进您的代码。当您遇到需要帮助的问题时，请始终努力使用干净、有效的 html 并遵循文档。
Bootstrap 的 .navbar 非常具体，它是左或右，仅此而已。你必须了解 CSS 和定位等，才能改变它。而且您还必须精通响应式 CSS，并且还要非常熟练地使用 Bootstrap CSS。
这不是成品。这种情况下导航栏的高度取决于最高 child 的高度，即 Logo 。 Logo 高 60 像素，顶部和底部填充 10 像素，第一个子链接的行高 80 像素用于使其居中。否则将需要创建更多的 CSS。
演示:https://jsbin.com/tupay/1/
https://jsbin.com/tupay/1/edit?html,css,output
HTML:
<!-- 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 -->
CSS
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;
}
}
关于html - 如何在水平居中的导航链接旁边对齐 Logo ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27328776/