G43beli G43beli - 14 days ago 5
HTML Question

Horizontally align li in ul on multiple rows

I have a menu with multiple listitems in it:
JS Fiddle

My goal is to align the listitems dinamically, also when it breaks on two or more lines.

So something like the center button in word. When i do text-aling on the

<li>
elements it just aligns it in the
<li>
itself. when I do
margin: 0 auto
on the
<li>
it breaks on like 8 rows.

It should somethink like:

enter image description here

Is there any way to achieve that?

Answer

Use Parent Styles as

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