css - 如何在 Bootstrap 中使用 CSS 在 nav-brand 类中加载徽标并使其居中？

Question

所以这里是我网站的链接点击这里

我使用了一个我发现的随机徽标来演示我正在尝试做的事情。可以看出，导航栏中的徽标未垂直居中

我使用以下代码生成导航栏

<!-- Start navbar -->
<div class="navbar navbar-fixed-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- <a class="navbar-brand" href="#">NBWS</a> -->
    <a class="navbar-brand pull-left">
    <a href="#"><img class = "brand" src="https://s3.amazonaws.com/sprc-www/img/logo.png" alt="SparkCharger" /></a>
    </a>

      <!-- Dropdown menu -->
      <ul class="nav navbar-nav pull-right">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="forecast.html">Forecast</a></li>
        <li><a href="Links.html">Links</a></li>
      </ul>  
      <li class="dropdown">
          <a href="#" class="dropdown" data-toggle="dropdown">About <b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li class="active"><a href="theteam.html">The Team</a></li>
            <li><a href="thisstation.html">The Weather Station</a></li>
          </ul>
        </li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

和这个自定义 css 来调整图像大小

/* Important for logo */
.brand {height: 25px;}

任何想法如何使图像居中？

Answer 1

现在添加line height您的锚链接，Display inline-block 就像这样

.navbar-brand.pull-left+a {
display: inline-block;
vertical-align: top;
line-height: 50px;
}

结果是这个