如何在自举导航栏中正确对齐插入图像

我的网页的导航栏如下所示，其中{{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中进行了一些调整，你的解决方案正在工作。谢谢。 –

如何在自举导航栏中正确对齐插入图像

回答

相关问题