2015-04-05 70 views
0

我有一个问题,我的分页栏 - 我不能中心这个吧......中心对齐分页栏

这里是我的代码:

<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> 

我什么都试过,但它不工作... 我尝试了一切,但它不工作...

这是DEMO。 任何人都可以帮助我?

谢谢。

回答

1

一个额外的周围元素('容器')可能有帮助。您可以在酒吧inline-block,并使用text-align: center父居中吧:

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

请注意,您在代码中写道:style="pagination",这当然应该是class="pagination",否则CSS将不会被应用到元素。

Updated fiddle

1

试试这个

.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); 
 
}
\t <div class="pagination"> 
 
\t \t <a href="#" class="page gradient">first</a><a href= 
 
\t \t "#" class="page gradient">2</a><a href="#" class= 
 
\t \t "page gradient">3</a><span class= 
 
\t \t "page active">4</span><a href="#" class= 
 
\t \t "page gradient">5</a><a href="#" class= 
 
\t \t "page gradient">6</a><a href="#" class= 
 
\t \t "page gradient">last</a> 
 
\t </div>