Center align pagination bar - css

Question

I have a problem with my pagination bar - I can't center this bar...
Here is my code:
<div style="pagination">
first<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">
first<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>