I want to center left floated list items

Question

I have something like this:

http://codepen.io/apijay/pen/RPxRNN

<ul>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
</ul>

li {
  margin: 0 10px;
  display: inline;
}

ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  text-align: center;
}

+----------------------------------------------------------------------------+

Option 1 | Option 2 | Option 3 | Option 4 | Option 5 | Option 6 |

------------------------Option 7 | Option 8---------------------------------

+----------------------------------------------------------------------------+

But, I want to have something like this so that when screen size changes the margin on left and right size is equal

+----------------------------------------------------------------------------+

----Option 1 | Option 2 | Option 3 | Option 4 | Option 5 Option 6----

----Option 7 | Option 8

+----------------------------------------------------------------------------+

Answer 1

To center the ul, use margin: auto; instead of text-align: center;. (The latter centers the content of the ul.)

You'll then need to be careful about li children wrapping, which you can prevent like this:

li {
  white-space: nowrap;
}

CodePen