Как центрировать пункт меню в навигационной панели, как в примере

Question

По аналогии с примером верхней панели навигации.

Я бы хотел, чтобы пункт меню располагался по центру, а два элемента плавали по всей длине справа от панели навигации.

До сих пор я выяснил, как плавать два элемента вправо, но я не уверен, как центрировать заголовок.Что такое antd способ центрировать пункт меню?

<Menu mode="horizontal">
    <Menu.Item>Centered</Menu.Item>
    <Menu.Item style={{float:"right"}}>Right</Menu.Item>
    <Menu.Item style={{float:"right"}}>Right</Menu.Item>
</Menu>

Answer 1

Попробуйте использовать flexbox

const centerStyle = {
  position: 'relative',
  display: 'flex',
  justifyContent: 'center'
};

const rightStyle = { position: 'absolute', top: 0, right: 0 };

function App() {
  return (
    <Menu style={centerStyle} mode="horizontal">
      <Menu.Item> Cookies </Menu.Item>
      <Menu.Item> Cookies2 </Menu.Item>
      <Menu.Item style={rightStyle}> Right </Menu.Item>
    </Menu>
  );
}