CSS：无法将 WordPress 分页居中 Post 网格

Question

正在为 Elementor 完成 Post 网格插件的分叉，我几乎完成了它，但由于某种原因，分页没有居中。即使我有 text-align: center on，它也总是向左对齐。网格在这里：https://www.staging2.datacoral.com/about/page/2/

这是我的HTML（我压缩了一点）

<div class="col-md-12">
    <nav class='pagination wp-caption void-grid-nav'>
       <a class="prev page-numbers" href="/page/1/">« Previous</a>
       <a class="page-numbers" href="/page/1/">1</a>
       <span aria-current="page" class="page-numbers current">2</span> 
       <a class="page-numbers" href="/page/3/">3</a>
       <a class="next page-numbers" href="/page/3/">Next »</a>
    </nav>
</div>

和CSS：

.elementor-4997 .elementor-element.elementor-element-e08e85e .void-grid-nav {
    text-align: center;
    width: 100%;
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

Answer 1

对于 display: flex; 的容器，使用 justify-content: center; 将内容居中。

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center; /* ⭐️ */
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

在这种情况下，您可以安全地删除 .elementor-4997 .elementor-element.elementor-element-e08e85e .void-grid-nav 样式。

CSS：无法将 WordPress 分页居中 Post 网格

CSS: Can't center pagination for a WordPress Post Grid

css

centering