如何在自舉導航欄中正確對齊插入圖像

我的網頁的導航欄如下所示，其中{{heading}}在呈現時被評估爲「度量標準管理簡介」。在使用HTML引導看起來象下面這樣：如何在自舉導航欄中正確對齊插入圖像

<html> 
<head> 
    <title>{{ heading }}</title> 
</head> 
<body> 
    <div class="bs-iso"> 
    <nav class="bs-iso navbar navbar-inverse navbar-fixed-top"> 
     <div class="bs-iso container-fluid"> 
      <div class="bs-iso navbar-header"> 
       <a class="bs-iso navbar-brand" href="/">{{heading}}</a><a id="foo" class="bs-iso navbar-brand" href="#"></a> 
      </div> 
      <div class=" bs-iso navbar-text navbar-right" style="margin-right:14px;"> 
       Sign In ! 
      </div>

現在，我只想在體內標題之前插入圖像。我從特定路徑獲取該圖像並嘗試渲染該圖像。然而，圖像和標題不是內聯和正確對齊。是否有任何特殊的引導類或css設置，我需要使用它來正確地獲取？

下面是HTML中插入該圖像標記後：

<html> 
<head> 
    <title>{{ heading }}</title> 
    {{> css }} 
</head> 
<body> 
    <div class="bs-iso"> 
    <nav class="bs-iso navbar navbar-inverse navbar-fixed-top"> 
     <div class="bs-iso container-fluid"> 
      <div class="bs-iso navbar-header"> 
       <a class="bs-iso navbar-brand" style='padding:0 !important' href="/"> 
       <table><tr><td><img class='img-responsive2' src = 'image/foo.jpg'></td></tr></table> 

       {{heading}}</a><a id="foo" class="bs-iso navbar-brand" href="#"></a> 
      </div> 
      <div class=" bs-iso navbar-text navbar-right" style="margin-right:14px;"> 
       Sign In ! 
      </div>

來源

2017-04-12 A.G.Progm.Enthusiast

ü可以試試這個

HTML標籤

<a class="navbar-brand" href="#"> <img src="images/Logos.png" alt="company" class="img-resonsive"></a>

CSS

.navbar-brand { 
     height: auto !important; 
     padding: 10px 5px !important; 
    }

但是我的照片使用大小141x147

來源

2017-04-12 11:47:47

首先感謝回覆。它部分爲我工作。圖像正確對齊，但文本（即標題）向下移動了一下。 –

在我的html中進行了一些調整，你的解決方案正在工作。謝謝。 –

如何在自舉導航欄中正確對齊插入圖像

回答

相關問題