Django：分页不会在第1页居中

如何解决Django：分页不会在第1页居中

我添加了我发现的模板分页，它可以正常工作，但即使其他回答建议使用“文本中心”和“正当内容中心”，也不会在第1页居中。在第2页和第3页上看起来都很好...如下所示

{% block pagination %}

            {% if is_paginated %}
        <div class="text-center">
            <ul class="pagination justify-content-center">
              {% if page_obj.has_previous %}
                <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
              {% else %}
                <li class="disabled"><span>&laquo;</span></li>
              {% endif %}
              {% for i in paginator.page_range %}
                {% if page_obj.number == i %}
                  <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                {% else %}
                  <li><a href="?page={{ i }}">{{ i }}</a></li>
                {% endif %}
              {% endfor %}
              {% if page_obj.has_next %}
                <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
              {% else %}
                <li class="disabled"><span>&raquo;</span></li>
              {% endif %}
            </ul>
        </div>
        
          {% endif %}

        {% endblock %}

这是我使用的代码，这就是页面1上的样子以及向右拖动的代码。我目前没有任何分页的CSS代码，尽管我没有运气就尝试了其他选项。

如果我删除“文本中心”，则第1页居中，而第2/3页向左拉，所以我有些困惑。

p.s这是我的第一篇django帖子，所以请告诉我是否需要更多信息等。

谢谢！

编辑：将其添加到CSS但没有用-

.pagination {
  justify-content: center;
}

尝试从其他答案中选择d-flex类，第1页居中放置第2/3页向左拉：

                {% block pagination %}

            {% if is_paginated %}
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-3 py-5 border d-flex">
                        <ul class="pagination mx-auto">
                            {% if page_obj.has_previous %}
                                <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
                            {% else %}
                                <li class="disabled"><span>&laquo;</span></li>
                            {% endif %}
                            {% for i in paginator.page_range %}
                                {% if page_obj.number == i %}
                                <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                                {% else %}
                                <li><a href="?page={{ i }}">{{ i }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if page_obj.has_next %}
                                <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
                            {% else %}
                                <li class="disabled"><span>&raquo;</span></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

解决方法

设法弄清楚，以防万一有人遇到相同的问题，我需要使用与页面其余部分（我很傻）类似的布局类，例如“ container-wrap”和“ col- md-6 col-md-offset-3 text-center“：

                {% block pagination %}

            {% if is_paginated %}
            <div class="container-wrap">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <ul class="pagination mx-auto">
                            {% if page_obj.has_previous %}
                                <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
                            {% else %}
                                <li class="disabled"><span>&laquo;</span></li>
                            {% endif %}
                            {% for i in paginator.page_range %}
                                {% if page_obj.number == i %}
                                <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                                {% else %}
                                <li><a href="?page={{ i }}">{{ i }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if page_obj.has_next %}
                                <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
                            {% else %}
                                <li class="disabled"><span>&raquo;</span></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        
          {% endif %}

        {% endblock %}