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

【问题标题】：Django: Pagination wont centre on page 1Django：分页不会在第 1 页居中
【发布时间】：2020-12-19 12:01:16
【问题描述】：

我已经添加了一个我发现的模板分页，它工作正常，但不会在第 1 页居中，即使按照其他答案的推荐使用“text-center”和“justify-content-center”。它在第 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>

【问题讨论】：

试试这个 - stackoverflow.com/a/43679608/6490744
@SowjanyaRBhat 我试过把它添加到 ul 和 CSS 代码中！
你也尝试过 d-flex 类吗？
@SowjanyaRBhat 查看编辑，尝试了答案中的代码，但第 2/3 页现在拉到了右边

标签： python html css django pagination

【解决方案1】：

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

                {% 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 %}

【讨论】：