Я пытаюсь центрировать свой paginator.
Я продолжаю пробовать разные вещи, но он либо идет полностью вправо, либо не центрируется.
Это мой код:
<?php
$pagination = $products->pagination();?>
<?php foreach($pagination->range(10)as $r): ?>
<div class = "paginator">
<ul>
<li><a<?php if ($pagination->page() == $r) echo ' ' ?> href = "<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
</ul>
</div>
<?php endforeach ?>
?>
а вот мой css
.paginator {
width: 100%;
margin-left: auto;
margin-right: auto;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
float: left;
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}
🤔 А знаете ли вы, что...
PHP активно обновляется и совершенствуется, чтобы соответствовать современным стандартам.
Добавить text-align: center; к .paginator и удалить float: left; из .paginator li
Обновлено: добавил контейнер для всех пагинаторов, а затем превратил .paginator в disply: inline-block; и добавил text-align: center; в новый контейнер в CSS. Также удалите width: 100%; из .paginator
Также обратите внимание, сделайте этот контейнер вне цикла foreach.
См. рабочий пример здесь:
.container {
text-align: center;
}
.paginator {
margin-left: auto;
margin-right: auto;
text-align: center;
display: inline-block;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}<div class = "container">
<div class = "paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class = "paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class = "paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
</div>