html - CSS auto change ul width; fit to MINIMUM width of children inline-block li's? -

html - CSS auto change ul width; fit to MINIMUM width of children inline-block li's? -

i have page page buttons generated unordered list. styled page buttons appear horizontal row. because ul styled way, having hard time figuring out how center it. getting width set 100% of div it's in. buttons (each in li) aligned left side of ul. need buttons centered in middle of div. however, because ul 100% width, can't center ul (in sense, centered). i'm not sure how li's center within ul; setting position on li's absolute doesn't work because of them set in same place, overlapping each other.

it fine if set width of ul of contents , center ul on page, can't set ul constant width because width changes depending on how many pages there are; searches result in 40 page, while other have 1 page. need ul automatically fit width of page buttons, don't know how that.

here's fiddle made reproduce issue.

the code:

<div class="searchresults"> <div class="event"> <div class=""> <h3> <a href="/faculty-and-research/faculty-directory/detail/?id=41432"> illustration of search result loaded on page. total width of content box; page buttons should centered under box </a> </h3> <span> </span> </div> </div> <div class="searchpagination"> <ul> <li><a href="/webassets/templates/eventsearchresults.aspx?page=8&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="pagenavigator"><i class='fa fa-caret-left'></i></a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=1&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">1</a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=2&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">2</a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=3&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="active">3</a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=...&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="dots">...</a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=40&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">40</a></li> <li><a href="/webassets/templates/eventsearchresults.aspx?page=10&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="pagenavigator"><i class='fa fa-caret-right'></i></a></li> </ul> </div> </div>

edit: added reddish border div , bluish border ul. can see ul taking whole width of div, centering ul doesn't because it's centered... needs centered boxes within ul

add ul display:inline-block, , set .searchpagination text-align:center;

html pagination html-lists css