Bootstrap 的文本对齐类（如 text-start、text-center）仅控制块内文字对齐，不适用于行内混合对齐或 Flex 子项；响应式需按移动优先组合使用，如 text-center text-md-end；Flex 容器中应改用 justify-content-center 等布局类。
text-align 是 CSS 属性，不是 Bootstrap 的类名；Bootstrap 提供的是封装好的工具类，比如 text-start、text-center，它们底层就是设置 text-align，但不能混用或当成函数调用。
text-start / text-center / text-end 是 Bootstrap 5 的标准对齐类
Bootstrap 5 废弃了 text-left 和 text-right，改用语义更清晰的 text-start（左对齐）和 text-end（右对齐），text-center 和 text-justify 保留不变。这些类直接作用于块级元素（如 <p>、<div>），影响其内部所有行内内容的基线对齐位置。
- 默认对齐是
text-start，所以不加类就左对齐 -
text-center让整段文字水平居中，不是“让某几个字居中” -
text-justify在中文场景下渲染效果不稳定，各浏览器表现不一，慎用于正式产品 - 不要给父容器加
text-center，再指望子元素用float: left拉回左边——text-align不会穿透或局部覆盖
为什么加了 text-center 没生效？常见布局干扰
最常踩的坑是父级用了 Flex 布局：d-flex、justify-content-* 类会让子元素脱离 text-align 控制范围。例如卡片头部 .card-header 如果被包在 d-flex 容器里，里面再套一个 <h5 class="text-center">，这个 text-center 就无效。
- 检查
.card-header或其直接父元素是否含d-flex、justify-content-类 - 如果确实是 Flex 容器，对齐目标应换成
justify-content-center（控制主轴）或align-items-center（控制交叉轴） - 想保留文字容器的
text-center，就得把它从 Flex 子项变成普通块级子项——删掉d-flex，或把文字提一层到 Flex 容器外 - 避免同时写
text-center text-md-end又加style="text-align: right"，内联样式优先级高，会干掉响应式类
响应式对齐要按断点组合写，不是“自动适配”
Bootstrap 的响应式文本类是“移动优先覆盖式”，不是条件判断。写 text-center text-md-end 表示：小屏（xs）居中，从 md（768px）起全部右对齐；没写 text-sm-start，不代表小屏就左对齐——它继承的是全局默认 text-start，但你显式写了 text-center，所以小屏就是居中。
- 断点类必须成对/成组使用，单独写
text-lg-center而不写基础类，可能在小屏失效 - 常用组合：
text-start text-md-center text-lg-end（小屏左 → 中屏中 → 大屏右） - 断点名必须紧贴
text-后，text-md-center对，text-center-md错 - 没有
text-xs-*，xs是默认断点，不带前缀
同一段落内无法混合对齐，别硬套 text-* 类
想实现“标签左对齐、数值居中、单位右对齐”这种需求，text-start、text-center 这类工具类完全无解——它们作用于整个块，不是行内定位。这时候得切到 Flex 布局层级。
- 用
d-flex包住整段，内部用flex-grow-1占位 +justify-content-center控制中间区域 - 或者放弃
<p>，改用<div class="d-flex"><span>标签</span><span class="flex-grow-1 text-center">数值</span><span>单位</span></div> - 别试图给
<span>加text-center——它不是块级元素，text-align不生效 - Flex 是唯一靠谱路径；CSS Grid 在这里太重，且 Bootstrap 5 默认栅格不提供行内 grid 支持
真正难的不是记类名，而是分清什么时候该用 text-*，什么时候必须切到 justify-content- 或手写 flex 规则。对齐类只管“块内文字怎么排”，不管“块本身怎么摆”。
