引导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>

ass

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. 将图标移动到链接文本下方（“菜单”）
3. 将display：flex和align-items：center添加到.nav-link的css中（在本例中为.nav-link--menu）

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