CSS text-align center not working - html

Question

I have the following html :
<div class="pagination">
<ul id="paginationnbEnreg">
<li class="active">
<a onclick="changePageMP3('1');" title="Page 1" href="#">1</a>
</li>
</ul>
<span id="nbEnreg" class="label">55 found</span>
</div>
With the following css :
.pagination {
margin: auto;
text-align: center;
outline: medium none;
padding: 0;
position: relative;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 18px;
}
.label {
color: #ffffff;
display: inline-block;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
padding: 2px 4px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: baseline;
white-space: nowrap;
}
My list will diplay on the left of the page while "55 found" will diplay in the center of the page.
I am trying to get my list in the middle of the page but can't get it working.

Answer 1

I think this is happening because you didn't remove the list-style and didn't reset the margin and padding.
Do you mean like this http://jsfiddle.net/06u4bsqn/ ?

Answer 2

For margin:auto your box needs a width setting. Otherwise it takes 100%.

Answer 3

Your ul is 100% wide as it is a block level element.
You can center it (with the span) by setting display:inline-block on the ul
.pagination {
margin: auto;
text-align: center;
outline: medium none;
padding: 0;
position: relative;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
background: plum;
}
.pagination ul {
display: inline-block;
}
.label {
color: #ffffff;
display: inline-block;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
padding: 2px 4px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: baseline;
white-space: nowrap;
}
<div class="pagination">
<ul id="paginationnbEnreg">
<li class="active">
<a onclick="changePageMP3('1');" title="Page 1" href="#">1</a>
</li>
</ul>
<span id="nbEnreg" class="label">55 found</span>
</div>