菜单栏中的中心项目

Question

我正在使用语义UI反应，并且正在与<Menu>一起创建菜单栏。问题是我试图在顶部栏中居中放置一个项目。现在，我在左侧有2个项目，在右侧有一个项目，并且在最新的左侧项目和右侧项目之间居中。 Here is a sandbox of what I'm talking about.

我真正想要的是位于屏幕中央（或顶部栏中央）的项目，而不管左右两侧有多少项目（除非显然有太多项目）左侧或右侧有很多项目，但在这种情况下，我只希望左侧有两个项目，右侧只有一个）。我该如何实现？

谢谢！

Answer 1

喜欢吗？

  

OLD   

     

新   

此处中心项目样式

style={{
   position: "fixed",
   left: "50%",
   transform: "translate(-50%, 0)"
}}

主要因素是

• position: "fixed"或"absolute"，使商品不在乎其他商品位置
• left: "50%"将使项目位于屏幕中间但是，项目的起始位置将位于屏幕中间
• tranfrom: "translate(-50%,0)"将拉回自己的50％宽度和0高度的位置

Answer 2

我认为您需要做的是将所有右边的导航项放在一个div中，将左边的导航项放在一个div中，并将中心项放在一个div中，或者保持原样。比您可以修改标题中三个div的间隔方式，即间隔或间隔。

也许是这样？ https://codesandbox.io/s/trusting-satoshi-estgd?fontsize=14