Even though this issue seems straightforward and many others have asked similar questions on the site, I find myself stuck after reading through several solutions and attempting various fixes. Why is this happening?
My problem involves centering a navigation list for pagination on my Django site. Here is the code I am using:
{% if concerts.has_other_pages %}
<div class="center">
<ul class="paginator">
{% if concerts.has_previous %}
<li><a href="?page={{ concerts.previous_page_number }}">«</a></li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in concerts.paginator.page_range %}
{% if concerts.number == i %}
<li class="active"><span>{{ i }}</span></li>
{% else %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if concerts.has_next %}
<li><a href="?page={{ concerts.next_page_number }}">»</a></li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
{% endif %}
Additionally, here is the CSS I am using:
.center{
text-align: center;
}
.center .paginator{
width: 100%;
margin: 1em 0;
padding: 0;
list-style-type: none;
}
.paginator li{
display: inline-block;
float: left;
padding: 8px 16px;
border-radius: 5px;
font-size: 1.3em;
text-align: center;
}
.paginator li a{
padding: 8px 16px;
border-radius: 5px;
}
.paginator li.active{
background-color: #444;
}
.paginator li a:hover{
background-color: #111;
border-radius: 5px;
transition: background-color .5s;
}
Despite trying various approaches, I cannot get the navigation buttons to center on the screen. Can anyone provide insight on what might be causing this issue? I have spent a significant amount of time troubleshooting what seems like a simple problem.