Question

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">
          <div> <img src="images/logo.png" /></div>
          <h1><span>SUJALA WELLNESS</span> </h1>
        </div>
      </div>

      <div class="navbar-collapse collapse">
        <div class="menu">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="index.html" class="active">Home</a></li>
            <li role="presentation"><a href="https://www.kykindia.com" target="_blank">KYK India</a></li>
            <li role="presentation"><a href="https://www.kykindia.com/health-benefits/" target="_blank">Health Benefits</a></li>
            <li role="presentation"><a href="https://www.kykindia.com/certifications/ " target="_blank">Certifications</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

How do i resize the logo? I want it in same dimensions as navbar. click here to open image

我希望徽标位于导航栏内，旁边是公司的名称。如何对齐图像和文本。如果内容与div标签重叠，则没问题。

Answer 1

我稍微重构了您的代码，并尝试使用flexbox：

.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid gray;
  padding: 10px;
}

.navbar__left,
.navbar__right,
.navbar__list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.navbar__logo {
  width: 150px;
  height: 100px;
}

.navbar__title {
  margin-left: 10px;
}

.navbar__list-item {
  list-style: none;
  margin-right: 20px;
}

<nav class="navbar">
  <div class="navbar__left">
    <img class="navbar__logo" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="logo">
    <span class="navbar__title">My Company</span>
  </div>
  <div class="navbar__right">
    <ul class="navbar__list" role="tablist">
      <li class="navbar__list-item" role="presentation"><a href="index.html" class="active">Home</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com" target="_blank">KYK India</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com/health-benefits/" target="_blank">Health Benefits</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com/certifications/ " target="_blank">Certifications</a></li>
      <li class="navbar__list-item" role="presentation"><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 2

<div class="navbar-brand">
    <span><img src="images/logo.png"/></span>
    SUJALA WELLNES
</div>

如有必要，请在样式表中的height: ...px;上设置.navbar-brand img。不要使用<h1>，因为h代码默认为inline-block，因此从新行开始

对齐导航栏div中的图像

2 个答案: