我试图在导航栏上设置图片,但我无法正确放置。
这是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>
以下是图片显示的内容:
我能做什么?
感谢。
答案 0 :(得分:0)
.navbar-brand
应该有display:inline-block;
.navbar-brand .img
应该有max-width
,max-height;
还可以尝试添加vertical-align: top;
答案 1 :(得分:0)
你可以这样做 -
工作示例
Both
&#13;
.navbar-inverse .navbar-brand {
display: flex;
align-items: center;
padding: 5px;
}
.navbar-brand img {
height: 100%;
margin-right: 20px;
}
&#13;