Center align pagination bar

Question

I have a problem with my pagination bar - I can't center this bar...

Here is my code:

<div style="pagination">
    <a href="#" class="page gradient">first</a><a href=
    "#" class="page gradient">2</a><a href="#" class=
    "page gradient">3</a><span class=
    "page active">4</span><a href="#" class=
    "page gradient">5</a><a href="#" class=
    "page gradient">6</a><a href="#" class=
    "page gradient">last</a>
</div>
<style>
.pagination {
    padding: 20px;
    margin-bottom: 20px;
    color: #666;
    font: 14px/24px sans-serif;
}

.page {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.page.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}

.pagination.dark {
    background: #414449;
    color: #feffff;
}

.page.dark {
    border: solid 1px #32373b;
    background: #3e4347;
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    color: #feffff;
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}

.page.dark:hover, .page.dark.gradient:hover {
    background: #3d4f5d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}

.page.dark.active {
    border: none;
    background: #2f3237;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
}

.page.dark.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
    background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
}
</style>

I tried everything but it doesn't work... I tried everything but it doesn't work...

Here is DEMO . Anyone can help me?

Thanks.

Answer 1

An extra surrounding element ('container') may help here. You can make the bar inline-block and use text-align: center on the parent to center the bar:

.container {
    text-align: center;
}
.pagination {
    display: inline-block;

Note that you wrote style="pagination" in your code, which should of course be class="pagination" , otherwise the CSS won't be applied to the element at all.

Updated fiddle

Answer 2

Try this

 .pagination { padding: 20px; margin-bottom: 20px; color: #666; font: 14px/24px sans-serif; text-align: center; } .page { display: inline-block; padding: 0px 9px; margin-right: 4px; border-radius: 3px; border: solid 1px #c0c0c0; background: #e9e9e9; box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1); font-size: .875em; font-weight: bold; text-decoration: none; color: #717171; text-shadow: 0px 1px 0px rgba(255,255,255, 1); } .page:hover, .page.gradient:hover { background: #fefefe; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0); } .page.active { border: none; background: #616161; box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8); color: #f0f0f0; text-shadow: 0px 0px 3px rgba(0,0,0, .5); } .page.gradient { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9)); background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9); } .pagination.dark { background: #414449; color: #feffff; } .page.dark { border: solid 1px #32373b; background: #3e4347; box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1); color: #feffff; text-shadow: 0px 1px 0px rgba(0,0,0, .5); } .page.dark:hover, .page.dark.gradient:hover { background: #3d4f5d; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d)); background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d); } .page.dark.active { border: none; background: #2f3237; box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1); } .page.dark.gradient { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347)); background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347); } 

  <div class="pagination"> <a href="#" class="page gradient">first</a><a href= "#" class="page gradient">2</a><a href="#" class= "page gradient">3</a><span class= "page active">4</span><a href="#" class= "page gradient">5</a><a href="#" class= "page gradient">6</a><a href="#" class= "page gradient">last</a> </div>