如何使用 react-bootstrap 将分页块居中答案

【问题标题】：How to center pagination block with react-bootstrap如何使用 react-bootstrap 将分页块居中
【发布时间】：2021-01-25 13:48:45
【问题描述】：

我已经为我正在使用react-bootstrap 构建的小型网络应用程序构建了一个自定义分页设置。我已经让所有的集成和分页正常工作。我对react / bootstrap 比较陌生，并且没有做过很多css。我想尽可能避免css，这就是我选择与react-bootstrap合作的原因

我遇到的问题是无法让我的分页出现在块的中心：

我的反应钩子看起来像这样：

return (
        <div>
            <div align="center">
                <div className="p-3">
                    <Disclaimer/>
                </div>
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
                {custom_cards}
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
            </div>
        </div>
    );

我知道解决方法在这里：

                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>

我尝试过align 和其他类似text-center 的东西。作为新手，我没有正确的关键字来为我在网络上提供良好的搜索结果。如果您有任何线索，我将不胜感激。

【问题讨论】：

这能回答你的问题吗？ Flexbox: center horizontally and vertically

标签： html reactjs pagination react-bootstrap

【解决方案1】：

您可以使用引导类将分页组件居中

<Pagination size="lg" className="d-flex justify-content-center">
    {pages}
</Pagination>

【讨论】：

【解决方案2】：

您可以简单地将这两个 CSS 属性添加到父 div：

style={{ display: "flex", justifyContent: "center" }}

<div style={{ display: "flex", justifyContent: "center" }}>
  <Pagination>
    <Pagination.First />
    <Pagination.Prev />
    <Pagination.Item>{1}</Pagination.Item>
    <Pagination.Ellipsis />

    <Pagination.Item>{10}</Pagination.Item>
    <Pagination.Item>{11}</Pagination.Item>
    <Pagination.Item active>{12}</Pagination.Item>
    <Pagination.Item>{13}</Pagination.Item>
    <Pagination.Item disabled>{14}</Pagination.Item>

    <Pagination.Ellipsis />
    <Pagination.Item>{20}</Pagination.Item>
    <Pagination.Next />
    <Pagination.Last />
  </Pagination>
</div>

【讨论】：

【解决方案3】：

也许，您可以使用页脚/分页类和 .css 类。

.Pagination {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

<footer className="Pagination">
   <p>I'm a footer</p>
</footer>

【讨论】：