如何在自举导航栏中正确对齐插入图像
问题描述:
我的网页的导航栏如下所示,其中{{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>
答
ü可以试试这个
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
首先感谢回复。它部分为我工作。图像正确对齐,但文本(即标题)向下移动了一下。 –
在我的html中进行了一些调整,你的解决方案正在工作。谢谢。 –