在Bootstrap v3.3.7 (http://getbootstrap.com)中,在导航条内设置LOGO
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#" > <img src="img/logo.png" alt="茶语"/> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span>主页 </a> </li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">BootStrap</a></li> <li><a href="#">工具</a></li> <li><a href="#">问题记录</a></li> </ul> </div> </div> </nav>
结果LOGO没有居中
更改a的内外边距样式可以解决这个问题
<a class="navbar-brand" href="#" style="margin: 0 0;padding: 0 0;"> <img src="img/logo.png" alt="茶语"/> </a>