如何在导航栏中间对齐项目? [英] How to align item in middle of navbar?

问题描述

导航栏中有6个项目:

1. 前3个项目应在导航栏的开头对齐为 flex-start .

然后徽标应位于导航栏的中心

Then Logo should be in center of navbar

最后-> flex-end 应该带有2个图标

And on the end -> flex-end should come 2 icons

这是导航栏当前状态的屏幕截图:

Here is screenshot of navbar current condition:

问题:是徽标的位置-正在使用 margin-left:'27％'.并且在不同的屏幕尺寸上徽标不能很好地对齐.

Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.

我想对徽标穿过 flex 的方式进行一些调整，有没有办法使用 flex 做到这一点?

I would like to align some how that logo trough flex, is there a way to do that with flex?

检查代码:

HTML/jsx:

 <div className="container">
  <header className="header">
    <nav className="user-nav">
      <div className="user-nav-item">
        <Link href="/">
          <a className="user-nav-item-link">Overview</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/search">
          <a className="user-nav-item-link">Search</a>
        </Link>
      </div>
      <div className="user-nav-item">
        <Link href="/feed">
          <a className="user-nav-item-link">Feed</a>
        </Link>
      </div>
      <h3 className="logo">Logo</h3>
    </nav>

    <div className="user-nav-icon">
      <div className="user-nav-icon-box">
        <img src={bellIcon} alt="notify icon" />
      </div>
      <div className="user-nav-icon-box">
        <img src={settingsIcon} alt="settings icon" />
      </div>
    </div>
  </header>
</div>

CSS:

.container {
  max-width: 100vw;
  display: flex;
  flex-direction: column;


.header {
  display: flex;
  align-items: center;
  height: 5rem;
  color: #fff;
  background-color: black;

  .user-nav {
    width: 100%;
    display: flex;
    align-items: center;

    &-item {
      width: 5.5rem;
      padding: 1.5rem;
      cursor: pointer;
    }

    &-item-link {
      text-decoration: none;
      color: white;
    }

    .logo {
      margin-left: 27%;
    }

    &-icon {
      display: flex;
      align-items: center;
      background-color: white;
      color: red;
      margin-right: 3rem;

      & > * {
        padding: 0 0.8rem;
        cursor: pointer;
      }

      &-icon-notification {
        color: red;
      }
    }
  }
}

}

推荐答案

使用Flex Box.要实现这一目标将更加困难，我有另一种选择.请在Codepen上测试以下代码:

Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:

* {
  box-sizing: border-box;
}

.parent{
  width: 100%;
  min-height: 80px;
  background-color: yellow;
  display: relative;
}
.nav-menu,
.icons{
  display: inline-block;
}
.icons{
  float: right;
  margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
  margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
  width: 150px;
  height: 40px;
  position: absolute;
  left: 50%;
   background-color: green;
  transform: translateX(-50%);
}

<div class="parent">
  <div class="nav-menu"> Your Menu</div>
  <div class="logo"></div>
  <div class="icons">Your Icons</div>
</div>

这篇关于如何在导航栏中间对齐项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！