Question

我需要使用语义UI反应在菜单内部将标题（Menu.Item）居中的帮助。这是我当前的代码：

render() {    
    return (
      <Menu>
        <Menu.Item>
          Editorials
        </Menu.Item>

        <Menu.Item>
          Reviews
        </Menu.Item>

        <Menu.Item position={"right"}>
          Upcoming Events
        </Menu.Item>
      </Menu>
    )
  }

因此，这将创建一个菜单，其中左侧有两个项目，右侧有一个项目。有什么办法可以在菜单中间创建项目？任何帮助将不胜感激！

谢谢。

Answer 1

这是我修复它的方法。我添加了 2 个位置：“正确”，第一个位置居中。我希望它有效。

#scene {
  width: 500px;
  height: 500px;
  background: lightgreen;
}

#bg {
  position: absolute;
  left: 100px;
  top: 260px;
  width: 100px;
  height: 100px;
  background: red;
  z-index: 10;
}

#card {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(rgba(140, 193, 63, 0.5) 0%, #138849 70%);
  transform: scale3d(0,0,1);
  animation: scaleup infinite ease-in 2s;
}

@keyframes scaleup {
  from {
    transform: scale3d(0, 0, 1);
  }
  to {
    transform: scale3d(1,1,1);
  }
}

Answer 2

这对我有用。也许使用显式设置的左侧项目的位置以及我用于设置它的语法来尝试此操作。（即，不要将位置值用大括号括起来）

<Menu>
  <Menu.Item position="left">
    Editorials
  </Menu.Item>

  <Menu.Item>Reviews</Menu.Item>

  <Menu.Item position="right">
    Upcoming Events
  </Menu.Item>
</Menu>

语义UI反应中的Center Menu.Item

2 个答案: