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

Аналогично примеру верхней панели навигации.

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

До сих пор я понял, как разместить два элемента вправо, но я не уверен, как центрировать элемент заголовка. Какой 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>

reactjs antd
person Nick Al    schedule 19.05.2019    source источник
comment
Добро пожаловать в StackOverflow! рассмотрите возможность принятия ответа, если он был полезен, ознакомьтесь с туром   -  person Dennis Vash    schedule 19.05.2019

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте использовать 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>
  );
}

введите здесь описание изображения

Редактировать смех-минский-7zbsh

person Dennis Vash    schedule 19.05.2019
comment
Спасибо, это работает, но когда у меня есть два элемента в правой части панели навигации, мне придется добавить свой собственный код для мобильных устройств, чтобы вызвать переполнение меню. Я думал, что пункт меню по центру будет действительно основным вариантом использования, разве у antd этого нет? - person Nick Al; 20.05.2019