在引导程序导航栏上插入图像

Question

我试图在导航栏上设置图片，但我无法正确放置。

这是html：

<nav class="navbar navbar-inverse navbar-fixed-top  ">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <img width="130px" height="70px"src="{% static "series/images/logo.png"%}">
    </a>
    <a class="navbar-brand" href="{% url 'series:index'%}">
      <span class="glyphicon glyphicon-home"></span> | MEGA SERIES  </a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="{% url 'series:index'%}">Series</a></li>
  </ul>
</nav>

以下是图片显示的内容：

我能做什么？

感谢。

Answer 1

.navbar-brand应该有display:inline-block; .navbar-brand .img应该有max-width，max-height;

还可以尝试添加vertical-align: top;

Answer 2

你可以这样做 -

工作示例

＆＃13;

＆＃13;

Both

＆＃13;

 .navbar-inverse .navbar-brand {
  display: flex;
  align-items: center;
  padding: 5px;
}
.navbar-brand img {
  height: 100%;
  margin-right: 20px;
}

＆＃13;

＆＃13;

＆＃13;