html - Logo 文字与图片对齐

Question

我试图让我的 Logo 和文本在同一行上对齐，但由于某种原因它没有发生。我也在努力解决的另一件事是，当我调整窗口大小时，右侧的文字消失了。HTML:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
        <div class = "logo">
        <img src="Images/logo.png" class="img-responsive"/>
        <h1> Logo </h1>
        </div> 
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <p>
            Need something ? <a href="#" role="link" id="account_btn">Create it now</a>
            </p>
          </ul>
        </div>
      </div>
</div>

CSS:

body {
    background-image: url("Images/a.jpg");
    padding-top: 58px;
}

.navbar-brand{
     margin-left:50px !important;
}

.logo {
    margin-left: 70px;
    margin-top: 40px;
}

.logo h1 {
    display: inline-block;
    padding-left: 10px;
}


.navbar-right {
    margin-top: 63px;
    margin-right: 20px;
}

Answer 1

对img 和h4 使用display: inline-block。

这是 fiddle https://jsfiddle.net/zy8tdbtu/

.logo img{
  display: inline-block;
  vertical-align: middle;
}
.logo h1{
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    margin: 0;
    font-size: 24px;
}

已更新

是因为您使用了 collapse 类，它在缩小屏幕时隐藏了 navbar-right。删除该类。

这是更新后的 fiddle :https://jsfiddle.net/zy8tdbtu/1/