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

Question

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

我的目标是动态地对齐列表项，即使它分成两行或多行。

就像word中的中心按钮一样。当我对元素进行文本编辑时，<li>它只是将其<li>本身对齐。当我这样做时，margin: 0 auto它<li>会分成 8 行。

它应该是这样的：

有什么办法可以实现这一点吗？

Answer 1

使用父样式作为

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