CSS Bootstrap 4列中居中分页

在本文中，我们将介绍如何在CSS Bootstrap 4列中居中分页。CSS Bootstrap是一个流行的前端框架，它提供了许多有用的组件和工具，方便开发者构建现代化和响应式的网页。

在某些情况下，我们希望在一列中居中显示分页组件，以便更好地布局我们的网页内容。下面我们将演示如何实现这一目标。

阅读更多：CSS 教程

创建一个列布局

首先，我们需要创建一个列布局来容纳我们的分页组件。在Bootstrap 4中，可以使用<div class="row">和<div class="col">来创建一个网格系统。

<div class="row">
   <div class="col">
      <!-- 在这里添加分页组件 -->
   </div>
</div>

在上述代码中，我们创建了一个包含一个列的行。现在，我们可以在列中添加分页组件。

居中分页组件

要在Bootstrap 4列中居中显示分页组件，我们可以应用一些CSS样式。下面是一种常用的实现方式：

.center-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
}

我们为分页组件的父容器添加了一个自定义类.center-pagination，并使用了CSS Flexbox布局来实现居中效果。

现在，我们可以将这个自定义类应用于我们的分页组件容器上：

<div class="row">
   <div class="col center-pagination">
      <!-- 分页组件将居中显示在这里 -->
   </div>
</div>

通过将.center-pagination类应用于列中的分页组件容器，我们可以使分页组件居中显示。

示例

下面是一个完整的示例，展示了如何在Bootstrap 4列中居中显示分页组件：

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Bootstrap 4 Center Pagination in Column</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <style>
         .center-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col center-pagination">
               <!-- 分页组件将居中显示在这里 -->
               <ul class="pagination">
                  <li class="page-item"><a class="page-link" href="#">前一页</a></li>
                  <li class="page-item active"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item"><a class="page-link" href="#">4</a></li>
                  <li class="page-item"><a class="page-link" href="#">5</a></li>
                  <li class="page-item"><a class="page-link" href="#">后一页</a></li>
               </ul>
            </div>
         </div>
      </div>
   </body>
</html>

在上述示例中，我们通过添加一个具有自定义类 .center-pagination 的列将分页组件放置在Bootstrap容器中。此自定义类使用了CSS Flexbox布局并使用 justify-content: center; 和 align-items: center; 来实现居中效果。