Center a <ul> list

Issue

I've been trying to find a solution to this problem, but nothing has worked for me so far. I hope I could get some help.

I'm trying to get a normal <ul> list to center on the page. The way I've been thinking to solve this is by embedding the list inside a div, and then simply center the div by using margin: 0 auto;. But my problem is that the list seems to take, by default, 100% width of its parent. So how can I adjust the actual list width to be as long as the longest list-item?

Here is an illustration of what I am trying to do:

OR, alternatively (I'm okay with either solution):

Thanks.

Solution

To adjust the width to the longest item add display: inline-block; to your ul element

JSfiddle

Answered By - Natalie Hedström