时间戳

首页 > 解决方案 > CSS：无法为 WordPress 后网格居中分页

css - CSS：无法为 WordPress 后网格居中分页

问题描述

一直在为 Elementor 完成一个 Post Grid 插件的分支，我几乎完成了它，但由于某种原因，分页没有居中。即使我有 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;
}

标签： csscentering

解决方案

对于带有 的容器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样式。

推荐阅读