如何在 Bootstrap 中水平居中包含表格的整块 div 内容

聖光之護

发布时间：2026-01-03 15:45:24

758人浏览过

来源于php中文网

原创

如何在 Bootstrap 中水平居中包含表格的整块 div 内容

本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格在内的整组内容，解决因表格默认左对齐导致的布局偏移问题。

在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如两个 col-md-6），该行本身默认采用 Flexbox 的 justify-content: flex-start 行为——即子列从左侧开始排列，不会自动居中。尤其当右侧列内含

时，表格作为块级元素默认不继承父容器的文本对齐样式，且无显式宽度控制，极易造成视觉上“内容靠左”的错觉，进而让用户误以为整个区块无法居中。

✅ 正确解法：直接在包裹目标内容的 .row 上添加 justify-content-center 工具类。该类会将 Flex 容器的主轴对齐方式设为 center，使所有子列（包括含表格的列）整体水平居中于其父容器（如 .container-fluid 或外层 .row）。

以下是修复后的关键代码片段（仅展示核心结构）：

A1.art

一个创新的AI艺术应用平台，旨在简化和普及艺术创作

下载

<!-- ✅ 关键修改：为包含左右两栏的 row 添加 justify-content-center -->
<div class="row justify-content-center">
  <div class="col-md-9 border-right border-bottom border-dark" id="OpenTime">
    <div class="row">
      <div class="col-md-6">
        <h1 style="font-family: Playfair Display;">Test Barbershop</h1>
        <p style="font-family: Quicksand; text-align: justify;">...</p>
      </div>
      <div class="col-md-6" id="OpenTime">
        <h1 style="font-family: Playfair Display;">Opening hours</h1>
        <p style="font-family: Quicksand;">Hours could change...</p>
        <table class="table table-borderless mb-0"> <!-- 推荐增强可读性 -->
          <tr><td>Monday</td><td>9:30 - 18:30</td></tr>
          <tr><td>Tuesday</td><td>9:30 - 18:30</td></tr>
          <!-- 其他行保持不变 -->
        </table>
      </div>
    </div>
  </div>
</div>

⚠️ 注意事项：

justify-content-center 作用于 Flex 容器（即 .row），而非单个列或表格本身；不要尝试给

加 text-center 或 mx-auto——这通常无效，因为表格默认 display: table，不响应 margin: auto 居中（除非显式设 display: block）。

若需进一步微调表格内部对齐，可在

上添加 text-center（居中单元格文字）或为

设置 text-start/text-end。

确保 Bootstrap 5+ CSS 已正确加载（justify-content-center 在 Bootstrap 4.4+ 和 5.x 中均可用）。

避免重复 ID（如示例中两个 id="OpenTime"），应改为唯一 ID 或使用 class 替代。

? 总结：居中整块内容的核心在于控制其直接父 Flex 容器的对齐方式，而非逐个元素设置样式。justify-content-center 是语义清晰、兼容性强、零额外 CSS 的最佳实践，适用于任何含混合内容（文本、图片、表格、表单等）的响应式布局场景。

HTMLSVG怎么嵌入页面_HTML矢量图形标签添加说明【教程】

HTML怎么添加div容器_布局容器添加方法【方法】

HTML浏览器不支持媒体怎么提示_HTML标签降级方法【汇总】

怎么把css和js并到html里面_CSS与JS合并到HTML文件技巧【指南】

HTML样式格式化综合问题_HTML样式格式化故障说明【说明】

相关标签:

css bootstrap 工具 ai 响应式布局排列 bootstrap auto 继承 class display margin flex table td

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：PHP文件最后修改时间的时区定制化显示教程下一篇：HTML5列表ul和ol标签怎么区分_无序有序列表用法【教程】

作者最新文章

如何在页面刷新后持久化保存复选框的选中状态

2026-03-09 13:20

Go 程序中 HTTP 连接复用导致内存持续增长的解决方案

2026-03-09 13:22

Python正则表达式中字符类内连字符（-）的位置规则详解

2026-03-09 13:24

一键启动！KiriGiri发布D加密虚拟机破解启动器

2026-03-09 13:33

Python中批量替换列表中所有匹配元素的正确方法

2026-03-09 13:41

如何在 Pandas 中安全获取首个存在的列值（避免 KeyError）

2026-03-09 13:54

如何在时间类中保留原始输入值以实现准确的总秒数计算

2026-03-09 13:56

《杀戮尖塔2》Steam峰值超57万成2026年首发最高游戏

2026-03-09 13:59

如何在单页中正确结合 AJAX 与 PHP 实现用户名实时校验

2026-03-09 14:01

壹心理如何提问

2026-03-09 14:15

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

class在c语言中的意思

在C语言中，"class" 是一个关键字，用于定义一个类。想了解更多class的相关内容，可以阅读本专题下面的文章。

870

2024.01.03

python中class的含义

本专题整合了python中class的相关内容，阅读专题下面的文章了解更多详细内容。

2025.12.06

margin在css中是啥意思

在CSS中，margin是一个用于设置元素外边距的属性。想了解更多margin的相关内容，可以阅读本专题下面的文章。

466

2023.12.18

flex教程

php中文网为大家带来了flex教程合集，Flex是采用Flex布局的元素，称为Flex容器（flex container），简称"容器"，它的所有子元素自动成为容器成员，有三个核心概念： flex项，需要布局的元素；flex容器，其包含flex项；排列方向，这决定了flex项的布局方向。php中文网还为大家带来flex的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

369

2023.06.14

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

216

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

412

2026.03.04

热门下载

网站特效

网站源码

网站素材

前端模板