标志文字与图片对齐

debugcn 发表于 Dev

老罗恩

我试图让我的标志和文字排列在同一行上，但由于某种原因它没有发生。我也在努力解决的另一件事是，当我调整窗口大小时，我右侧的文本消失了。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;
}

布万

使用display: inline-block两个img和h4。

这是小提琴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。删除那个类。

这是更新的小提琴：https : //jsfiddle.net/zy8tdbtu/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。