How can you center a list block with no set width?

Question

I am dealing with a UL block, a nav menu, that can shrink and grow. It's full of list items that are floating leftward, and are user-defined of any length. It has no fixed width, and I cannot alter the HTML or use javascript. All I can do is add CSS. What would be the safest way to center the list?

A quick example of what I have to work with: http://jsfiddle.net/DCYn2/1/ Bear in mind that I can only add CSS. I can't add html, js, or remove existing css.

You want to center the list itself or the contents of the list? — cimmanon, Apr 24 '13 at 18:37
@cimmanon, Apologies. I wish to center the entire list. The UL block. The contents inside grow to fill it. If I can center it without defining width, it'll always sort-of automatically center regardless of contents. — user1729506, Apr 24 '13 at 18:39
Perhaps this [question](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1) might help. — Brian Rogers, Apr 24 '13 at 18:41

score 4 · Accepted Answer · answered Apr 24 '13 at 18:41

4

The simplest way to center the ul is to change its display property to table and modify the margins.

http://tinker.io/c5ff0

ul {
    border: 1px solid;
    padding: 0;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

li {
    border: 1px solid red;
    display: inline-block;
}

answered Apr 24 '13 at 18:41

cimmanon

67,211
17
165
171

Thank you. I'll go ahead with this method. – user1729506 Apr 24 '13 at 18:51

How can you center a list block with no set width?

1 Answers1