Question

嘿我的导航栏中间有一个品牌img，但图片比链接中的实际文字大。我希望在品牌img的两侧都有链接）与品牌的中间（垂直中间点）对齐我尝试使用边距和填充但是它似乎没有做到这一点。

Navbar的HTML：

tupvalue

相关的CSS（注意我重置容器大小而不是徽标，因为当我做徽标时，两侧都有空的空间，因为它保持不变）：

<div class="nav">
        <div class="li">
            <a class="nav-link" href="#">PHOTOGRAPHER</a>
            <a class="nav-link" href="#">PORTFOLIO</a>
            <a class="hplogo-a" href=""><img class="hplogo-size" src="Images/Logo-Black - Copy.png" alt=""></a>
            <a class="nav-link" href="#">INVESTMENT + FAQ</a>
            <a class="nav-link" href="#">BLOG</a>
        </div>
    </div>

Answer 1

这看起来像是弹性箱的工作！

只需将您的嵌套div课程flex-container及其a设为课程flex-item ......

<div class="nav">
  <div class="li flex-container">
    <a class="nav-link flex-item" href="#">PHOTOGRAPHER</a>
    <a class="nav-link flex-item" href="#">PORTFOLIO</a>
    <a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a>
    <a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a>
    <a class="nav-link flex-item" href="#">BLOG</a>
  </div>
</div>

并将以下属性设置为您的网页＆＃c; ...

.flex-container {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.flex-item {
  margin: 5px;
}

..瞧！

我强烈建议clicking here获取有关弹性框的更多信息，因为它们非常有用。

这里有代码（我建议在整页中运行）：

＆＃13;

.flex-container {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.flex-item {
  margin: 5px;
}

＆＃13;

<div class="nav">
  <div class="li flex-container">
    <a class="nav-link flex-item" href="#">PHOTOGRAPHER</a>
    <a class="nav-link flex-item" href="#">PORTFOLIO</a>
    <a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a>
    <a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a>
    <a class="nav-link flex-item" href="#">BLOG</a>
  </div>
</div>

＆＃13;

我使用了一个相当大的徽标图像来更好地突出垂直对齐。

Answer 2

先生，希望我的回答对你有用，你想要导航栏中间的导航

<div class="navbar">


   <nav class="nav">
       <ul class="ul">
          <li> <a class="nav-link" href="#">PHOTOGRAPHER</a></li>
          <li><a class="nav-link" href="#">PORTFOLIO</a></li> 
          <li><a class="hplogo-a" href=""><img class="hplogo-size" src="https://s-media-cache-ak0.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt=""></a></li> 
          <li><a class="nav-link" href="#">INVESTMENT + FAQ</a></li> 
          <li><a class="nav-link" href="#">BLOG</a></li> 
      </ul>
      </nav>
      </div>

这是css

      .navbar{float: left;width: 100%;position: relative;}
      .nav{float: left;position: absolute;left:50%;transform:translate(-50% , 0 );}
      .hplogo-size{width:50px;height:50px;}
      .nav ul{list-style:none;}
      .nav ul li{text-decoration: none;display: inline-block;}

这里是Fiddle

移动导航栏中的链接

2 个答案: