Does anyone know how to properly set margin-auto on an ordered list? I'm having trouble with it in a complex setup. Unfortunately, I can't create a fiddle for demonstration purposes, but you can see the problem here.
I want the ordered list on the gray background to adjust its width based on the number of list items. Currently, I'm using the following code:
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;
}
The 50% width works fine for centering the list when there are more than 7-8 items, but it doesn't look good if there are only a few items. Is there another solution that would work better in this case?