html - 导航栏中的中心图像

Question

我在 bootstrap 中向我的导航栏添加了一个图像，但它完全不合时宜。我希望它在左侧居中，我做错了什么？

HTML 代码是:

<nav class = 'navbar navbar-default'>
  <div class = 'navbar-header'>
    <button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'>
      <span class = 'sr-only'>Toggle navigation</span>
      <span class='icon-bar top-bar'></span>
      <span class='icon-bar middle-bar'></span>
      <span class='icon-bar bottom-bar'></span></button>
    <a class = 'navbar-brand' href = '#'><img class='img-responsive2'       
      src='http://www.biophysics.org/portals/57/Images/newstar.png'></a>
  </div>
  <div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
  </div>
</nav> 

我的 CSS 是:

.navbar-default {   
    padding-left:10px;
    padding-right:10px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #00a3fe;
    font-size: 14pt;font-weight: 400;}


.nav.navbar-nav.navbar-right li a {
    color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #49bdfe;
    color: #FFFFFF;
}

.navbar-toggle, .icon-bar {
    border:1px solid white;
    background-color:white;
}

提前感谢您的帮助。

Answer 1

通过在 css 中添加这些行，它解决了问题:

//added css
.navbar-brand {
  padding:0 !important;
}


.img-responsive2 {
  position: relative;
  height: 100%;
}

这是一个BootPly

/* CSS used here will be applied after bootstrap.css */
.navbar-default {   
    padding-left:10px;
    padding-right:10px;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #00a3fe !important;
    font-size: 14pt;font-weight: 400;
}


.nav.navbar-nav.navbar-right li a {
    color: #ffffff;
}

.nav.navbar-nav.navbar-nav li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #49bdfe;
    color: #FFFFFF;
}

.navbar-toggle, .icon-bar {
    border:1px solid white;
    background-color:white;
}

//added css
.navbar-brand {
  padding: 0 ;
}


.img-responsive2 {
  position: relative;
  height: 100%;
  margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class = 'navbar navbar-default'>
  <div class = 'navbar-header'>
    <button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'>
      <span class = 'sr-only'>Toggle navigation</span>
      <span class='icon-bar top-bar'></span>
      <span class='icon-bar middle-bar'></span>
      <span class='icon-bar bottom-bar'></span></button>
    <a class ='navbar-brand'  style='padding:0 !important' href = '#'><img class='img-responsive2'       
      src='http://cheekytransport.co.uk/images/logo-new.png'></a>
  </div>
  <div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>About</a></li>
    </ul>  
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Get bids</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Register company</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Help</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-nav'>
      <li class='non-active'><a href='#'>Contact</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li>
    </ul>
  </div>
</nav>