1

ここに私のサイトへのリンクがありますここをクリック

私がやろうとしていることをデモするために見つけたランダムなロゴを使用しました。ご覧のとおり、ロゴはナビゲーションバーの垂直方向の中央に配置されていません

次のコードを使用してナビゲーションバーを作成しました

<!-- 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;}

画像を中央に配置する方法はありますか？

4

1 に答える 1

1

アンカーリンクを追加line heightして、このようにしますDisplay inline-block 

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

結果はこちら

ここに画像の説明を入力

于 2013-08-22T12:56:27.290 に答える