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>

无礼

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;
}

将您的.menu图标包装在包装纸中
将图标移到链接文本（'MENU'）下方
为.nav-link（或在本例中为.nav-link--菜单）的CSS中添加display：flex和align-items：center

请参阅此处： https://codepen.io/anon/pen/YmZLbm

引导Navbar元素未正确对齐

1 个答案: