html - Bootstrap Navbar 元素未正确对齐

Question

这是一直困扰我的 CSS 小问题之一! 我正在尝试对齐我的导航栏中的导航元素，其中包含一些图像和文本，我尝试了这部分代码，但它无法正常工作:

html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"
  integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#"><img src="../../../assets/images/logo-svg-2.svg" class="logo-soirees" alt=""></a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <div class="basket-container menu ">
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
        <li class="nav-item ">
          <a class="nav-link menu-link">
            MENU
          </a>
        </li>
      </div>

      <div>
        <li class="nav-item user-profile ">
          <a class="nav-link">
            <img src="../../../assets/images/User.svg" alt="">
          </a>
        </li>
      </div>
      <div class="basket-container">
        <li class="nav-item ">
          <a class="nav-link">
            <img class="basket" src="../../../assets/images/login.svg" alt="">
          </a>
        </li>
      </div>
    </ul>
  </div>
</nav>

sass

nav
  background-image: url("../../../assets/images/Header-Background.png")
  height: 165px
  background-position: center
  background-repeat: no-repeat
  background-size: cover

.navbar
  padding-right: 40px

.basket-container
  width: 40px
  height: 40px

.basket
  right: 0%
  top: 6%
  position: absolute

.user-profile
  margin-right: 70px
  width: 15px
  height: 18px

.logo-soirees
  padding-left: 40px

.menu
  margin-right: 52px
  margin-top: 6px
.menu-link
  color: #fff !important
  font-size: 14px
  font-weight: 500
  line-height: 1.14
  letter-spacing: 1px
  text-align: right

.menu-icon
  width: 22px
  height: 2px
  background-color: #fff
  margin: 6px 

我得到这个结果:

但我希望得到这个:

有没有比我做的更好的方法!如何解决？

谢谢!

Answer 1

<a href="#" class="nav-link nav-link--menu">
      MENU

    <div class="menu-icon-wrapper">
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
    </div>
</a>

.nav-link--menu {

     // add these to align your menu link correctly:
     display: flex;
     align-items: center;
}

1. 将您的 .menu-icons 包装在包装器中
2. 将图标移至链接文本下方('MENU')
3. 将 display:flex 和 align-items:center 添加到 .nav-link 的 css(或在本例中为 .nav-link--menu)

看这里: https://codepen.io/anon/pen/YmZLbm