Margin-auto on ordered list

Question

I have a problem with setting margin-auto on an ordered list. The setup is a bit complicated, otherwise I would have created a fiddle. You can view it here.

I need the ordered list on the gray background to auto-adapt it self depending on how many list-items there are. Right now this is the code I'm using:

ol {
counter-reset: level1;
font-size: 11px;
margin: 0 auto;
width: 50%;
}

ol li:before {
content: counter(level1, decimal) " ";
counter-increment: level1;
}

.ngg-gallery-list li {
color: gray;
display: inline-block;
margin: 5px 2px !important;
overflow: hidden;
}

If there are more than 7-8 list-items the 50% width works OK for centering the list, but if there are only 3 or 5 it doesn't look good. What other solution do I have?

Answer 1

try .ngg-gallery-list { text-align: center; }