html - 在多行上水平对齐 ul 中的 li

Question

我有一个包含多个列表项的菜单: JS Fiddle

我的目标是动态对齐列表项，当它在两行或更多行上中断时也是如此。

所以类似于 word 中的中心按钮。当我在 <li> 上发短信时元素它只是在 <li> 中对齐它本身。当我做 margin: 0 auto在 <li> 上它像 8 行一样中断。

它应该是这样的:

有什么办法可以实现吗？

Answer 1

使用父样式作为

{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}