如何正确对齐分页？答案

【问题标题】：How do I align my pagination properly?如何正确对齐分页？
【发布时间】：2017-04-30 13:29:43
【问题描述】：

我想对齐我的分页，使其位于页面的中心。但是，即使我将它们放在同一个 div 中，它的某些部分也不会对齐。任何帮助，将不胜感激。谢谢。

<div class="center">  
<ul class="pagination">

<a>Page: </a> <?php echo $pages; if($_GET['category'] != ''){?>
<a href="<?php echo $currentURL;?>View/All" 
<?php if($action == "ViewAll"){echo 'style="font-weight:bold;color:#000;text-decoration:none;"';}?>>
View All</a><?php }?>
</ul>
</div>    
</div>

<style>

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
padding-top: 300px;
}

 ul.pagination {
}


ul.pagination p{display: inline;}

ul.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

ul.pagination p a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

ul.pagination p a:hover:not(.active) {background-color: #ddd;}



</style>

【问题讨论】：

如果您将 php 代码替换为一些 html 内容，它可能会很有用，现在我在布局中看到的唯一内容是“页面：”和“查看/全部”矩形。你想让它居中吗？
您的li 标签在哪里？ a 不能是 ul 的直系子代：developer.mozilla.org/en/docs/Web/HTML/Element/ul

标签： html css pagination

【解决方案1】：

默认情况下，您的 div 将与页面（或包含它的任何元素）一样宽。让我们假设它会比你的分页更宽。为了使其居中。

给“ul”一个特定的宽度并为它设置一个“margin: 0 auto”。只要您不在其中浮动任何东西，它就会在容器 (div) 中居中。

【讨论】：