Question

这里我有一个固定在顶部的导航栏，我在其中放置了图像和文本。我不明白为什么标题没有进入灰色矩形的方式与图像对齐。任何帮助都非常感谢

这是css

.navbar-default {
  height: 70px;
  background-color: #333;
  border: 0;
}

.navbar .logo {
  width: 50px;
}

.navbar-brand {
  margin-top: 10px;
  padding: 0;
  width: 370px;
  background-color: #ddd;
}

Answer 1

JSFiddle - DEMO

您可以将margin:0;和display: inline-block;用于h1代码，将display: inline-block;用于.navbar-brand

<强> HTML：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container"> <a href='#' class='navbar-brand'>
        <img src="http://colorlib.com/wp/wp-content/uploads/2014/02/Olympic-logo.png" class="logo">
            <h1 class="heading">Title</h1>
      </a>
    </div>
</nav>

<强> CSS：

.navbar-default {
    height: 70px;
    background-color: #333;
    border: 0;
}
.navbar .logo {
    width: 50px;
}
.heading {
    margin:0;
    display: inline-block;
}
.navbar-brand {
    margin-top: 10px;
    padding: 0;
    width: 370px;
    background-color: #ddd;
    display: inline-block;
}

Answer 2

我使用这个解决方案：

<a class="navbar-brand" href="/main/">
   <img class="img-responsive" style="display:inline-block; height:30px; margin-top:-5px" src="logo.png" alt="logo" />
   LOGONAME
</a>

将文本放在navbar-brand中与图像一起

2 个答案:

JSFiddle - DEMO