html - 如何使用 react-bootstrap 将分页 block 居中

Question

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

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

我的 react 钩子(Hook)看起来像这样:

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 的东西。作为新手，我没有合适的关键字来为我在网络上提供良好的搜索结果。如果您在这里有任何线索，我将不胜感激。

Answer 1

您可以简单地将这两个 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>