如何在 css react 的导航栏中对齐我的图标?

吉尔实验室

我对 css 很陌生,我的导航栏看起来很糟糕。我正在尝试使用 css,但我没有比下图更好的了。如果我删除.menu,图标将垂直对齐;

当然,我已经看过很多关于这个主题的 stackoverflow 帖子并尝试了很多东西,但是再一次,不能比下图更好。

在此处输入图像描述

这是我的反应 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;
  }

任何建议或观察都将受到超级欢迎!

古斯塔沃萨帕塔

尝试将您的 css 更改为此

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章