翻页CSS 改为居中

发布网友发布时间：2022-05-02 03:31

共3个回答

热心网友时间：2022-06-27 17:55

如果是整体居中显示，那么要定义最外层#wp_page_numbers元素的宽度，定义margin:auto;最好知道显示的页码数，这样好定宽度！

热心网友时间：2022-06-27 17:55

如果是文字居中 #wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {}中text-align:left改为text-align:center即可

热心网友时间：2022-06-27 17:56

我看你的代码有点复杂，这里可以给点个人的建议吧，做任何东西，也都要先把结构部分先写出来，然后再加其它的修饰，我这里可以给一段翻页样式居中的代码：
html部分：
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
样式部分：这里能让内容居中的样式无非就是test了。
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0
}
.wrap {
background: #000;
width: 500px;
height: 100px;
}
.test {
text-align: center;
padding: 5px;
}
.test li {
display: inline;
}
.test a {
padding: 2px;
background: #316ac5;
color: #fff;
border: 1px solid #316ac5;
text-decoration: none;
}
.test a:hover {
background: #fff;
color: #316ac5;
}
</style>