如何在 css 反应中对齐导航栏中的图标？

Question

我是 css 的新手，我的导航栏看起来很糟糕。我正在尝试使用 css，但没有比下图更好的了。如果我删除 .menu，图标会垂直对齐；

当然，我已经看过很多关于这个主题的 Whosebug post 并尝试了很多东西，但再一次，没有比下面的图片更好的了。

这是我的反应 html 代码。

      <ul className="menu">
      <li>
            <a href="https://discord.com/channels/@me"  id="menu-item-41">
              <img src={Discord} alt="discord" className="discord-logo"/>
            </a>
            </li>
            <li>
            <a href="www.twitter.com" className="page-scroll" id="menu-item-42">
              <img src={Twitter} alt="twitter" className="twitter-logo"/>
            </a>
            </li>
            <li>
            <a href="#" className="page-scroll" id="menu-item-44">
              TAG
            </a>
            </li>
            <li>
            <a href="#roadmap-title" className="page-scroll" id="menu-item-43">
              ROAD MAP
            </a>
            </li>
            <li>
            <a href="#team" className="page-scroll" id="menu-item-45">
              TAG2
            </a>
            </li>
            <li>
              <button onClick={() =>  this.connect() }
                id="menu-item-47"
              className="connect-button">CONNECT 
              </button>
            </li>

        </ul>

这是我的 css :

li.menu-item { 
  margin-bottom: 40px;
  vertical-align: middle; 
  text-align: center; 
}

.menu{
  position: left;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  float: left; 
  margin: 40;
  }

非常欢迎任何建议或意见！

Answer 1

试试把你的css改成这个

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

如何在 css 反应中对齐导航栏中的图标？

How to I align my icons in the navbar in css react?

html

css

reactjs

web

navbar