Aligning all UL LI elements in one line in center with applying CSS only to the UL?

Question

How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.

I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?

Here is my Fiddle but I cannot align the <li> in center as : https://jsfiddle.net/pymg30yr/

Answer 1

The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)

In order to fix this, just make the ul flex and then add justify-content:center:

ul {
    padding:0; 
    margin:0;
    display: flex;
    list-style: none;
    justify-content:center;
}

<ul>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
	<li>Link 4</li>
	<li>Link 5</li>
	<li>Link 6</li>
	<li>Link 7</li>
	<li>Link 8</li>
	<li>Link 9</li>
	<li>Link 10</li>
</ul>