引導程序導航欄上方的徽標

Question

您好，我正在嘗試在引導導航欄上方放置徽標：

https://jsfiddle.net/3jod2k8z/1/

<div>

<div id="logo"><img src="http://www.benchmarklearning.co.uk/photo/logo.jpg" class="img-responsive" alt="bmlogo"> </div>

<div class="container-fluid">



<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

    <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="#"><img src="logotest.png">Benchmark</a>


   </div> 

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">


      <!-- class="active"-->
    <li><a href="#a">About</a></li>
    <li><a href="#b">Who we are</a></li>
    <li><a href="#c">Latest Publications</a></li>
    <li><a href="#d">Online Center</a></li>
    <li><a href="#e">Our Partners</a></li>
    <li><a href="#f">English My Way</a></li>
    <li><a href="#g">Apprenticeship</a></li>
    <li><a href="#h">IT Academy</a></li>
    <li><a href="languagesense.html">Learning Sense</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

如您所見，圖像是微型的，我似乎無法修復它，無論屏幕大小如何，都可以對中它嗎？

謝謝

Answer 1

樣式名稱[徽標]編輯，

#logo{
    padding-top:10px;
    width:100%;
}

至

#logo img{
    padding-top:10px;
    width:100%;
}

https://jsfiddle.net/3jod2k8z/6/

Answer 2

當我意識到您想居中對齊（水平？）時，使其寬度不會（始終）為100％？ 如果是這種情況，這應該可以解決問題：

#logo img{
  display:block;
  margin: 0 auto;
  height:200px;
  width:auto;
}

這是小提琴

Answer 3

將顯示設置為block並使用邊距使圖像居中。 然后，您可以使用媒體查詢使它在較小的視口上保持響應。 您可能還希望將#logo div的背景色設置為白色，因為您的圖像沒有透明的背景，並且如果在主體上設置了背景，則看起來會很奇怪。

請參閱工作示例片段。

 html, body { background: lightblue; } .navbar.navbar-default { background-color: #132D93; /* Old browsers */ background-image: -moz-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, right top, color-stop(32%, #0000CD), color-stop(50%, #4169E1), color-stop(68%, #0000CD)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* IE10+ */ background-image: linear-gradient(to right, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000CD', endColorstr='#0000CD', GradientType=1); /* IE6-9 */ border-bottom: 6px solid #B9975B; margin-bottom: 0px; } #logo { width: 100%; background: white; } #logo img { display: block; margin: 0 auto; height: 150px; padding: 10px; } .navbar.navbar-default ul li a { color: white; text-transform: uppercase; font-size: 13px; padding: 20px 10px; font-weight: bold; } .navbar.navbar-default .navbar-header a { color: white; text-transform: uppercase; font-size: 13px; padding: 20px 10px; font-weight: bold; } .navbar.navbar-default .navbar-brand { color: white; margin-top: -6px; } .navbar.navbar-default .navbar-brand img { margin-left: 23px; width: 40px; } .navbar.navbar-default .navbar-nav > .active > a, .navbar.navbar-default .navbar-nav > .active > a:hover, .navbar.navbar-default .navbar-nav > .active > a:focus { color: #000; background: #B9975B; font-weight: bold; } .navbar.navbar-default .active { color: #000; background: #B9975B; font-weight: bold; } .navbar.navbar-default .navbar-collapse { max-height: 300px; } .navbar.navbar-default .navbar-collapse li { font-size: 10px; } .navbar.navbar-default #a { color: red; } .navbar.navbar-default #b { color: green; } .navbar.navbar-default #c { color: blue; } .navbar.navbar-default .icon-bar { background-color: #B9975B; } .navbar.navbar-default .navbar-toggle { border: 2px solid #B9975B; } @media (max-width: 767px) { #logo img { height: 125px; } .navbar.navbar-default .navbar-brand { margin-top: -10px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div id="logo"> <img src="http://www.benchmarklearning.co.uk/photo/logo.jpg" alt="bmlogo"> </div> <nav class="navbar navbar-default" id="topnavbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="#"> <img src="http://www.benchmarklearning.co.uk/photo/logo.jpg">Benchmark</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#a">About</a> </li> <li><a href="#b">Who we are</a> </li> <li><a href="#c">Latest Publications</a> </li> <li><a href="#d">Online Center</a> </li> <li><a href="#e">Our Partners</a> </li> <li><a href="#f">English My Way</a> </li> <li><a href="#g">Apprenticeship</a> </li> <li><a href="#h">IT Academy</a> </li> <li><a href="languagesense.html">Learning Sense</a> </li> </ul> </div> </div> </nav>