Bootstrap分页默认左对齐因.pagination是flex容器，text-align无效；应直接设justify-content:center或end，或用Bootstrap工具类justify-content-center/end。

Bootstrap分页默认居左，text-align 为什么有时没反应

因为 Bootstrap 5+ 的 .pagination 是 flex 容器，默认不响应父级 text-align。你给外层加 text-align: center，它照旧左对齐——这不是你写错了，是 flex 布局的天然行为。

• 检查是否用了 Bootstrap 5 或更新版本（.pagination 内部是 display: flex）
• 直接对 .pagination 本身设 justify-content，别依赖父元素 text-align
• 如果外层是
  或
  ，确保它没被设成 flex 容器（否则 text-align 也无效）

  用 justify-content 居中或右对齐分页

  这是最直接、兼容性最好的方式，绕过 text-align 的限制，直击 flex 布局控制点。

  • 居中：.pagination { justify-content: center; }
  • 右对齐：.pagination { justify-content: flex-end; }
  • 要全局生效，加到自定义 CSS 文件里，且确保它在 Bootstrap CSS 之后加载
  • 避免用 !important——优先提高选择器权重，比如写成 nav .pagination

  不想改 CSS？试试 Bootstrap 内置工具类

  Bootstrap 5.3+ 提供了响应式对齐工具类，比手写 CSS 更轻量，也更符合框架习惯。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • 居中：
    ...
  • 右对齐：justify-content-end
  • 注意：.pagination 默认有上下 margin，用 m-0 清掉，避免和 justify-content 联用时错位
  • 这些类在 IE11 中不支持，如需兼容，退回手动写 justify-content

  用 text-align 成功的唯一可靠场景

  只有当 .pagination 被显式设为 display: inline-flex 或 display: inline-block 时，父容器的 text-align 才会起作用——但这不是默认行为，属于主动降级布局。

  • 例如：.pagination { display: inline-flex; } + 父
  • 缺点：失去 flex 子项的自动等宽/换行控制，响应式表现变弱
  • 不推荐日常使用，仅用于极简嵌入或 legacy 页面微调

  对齐本身很简单，难的是判断当前用的是哪个 Bootstrap 版本、有没有其他 CSS 干扰了 display 值——建议先用浏览器开发者工具看一眼 .pagination 计算后的 display 和 justify-content 值，再决定动哪一行代码。