Bootstrap .row类的display:flex为何导致p标签text-align:center失效？

这个问题的核心是Bootstrap 4的.row类默认启用了Flex布局，而text-align:center的作用逻辑在Flex容器和普通块级容器里完全不同，我给你拆解清楚：

1. 问题根源：.row是Flex容器 #

Bootstrap 4的.row类自带了核心Flex布局样式（简化后）：

.row {
  display: flex;
  flex-wrap: wrap;
}

当元素变成Flex容器后，text-align:center就没法控制Flex子元素（也就是你的<p>标签）的整体水平位置了——因为Flex布局有自己独立的对齐规则：text-align只能影响容器内的行内/行内块元素，或者块级元素内部的文本对齐，对Flex项目的整体位置完全不生效。

这就是为什么你设置#example { text-align: center; }后段落依然靠左：你的<p>是Flex子元素，它的位置由Flex布局的justify-content属性控制（默认值是flex-start，也就是左对齐），和text-align没关系。

2. 为什么禁用display:flex就生效了？ #

当你在开发者工具里禁用display:flex后，.row就变回了普通的块级容器：

• 此时<p>作为块级子元素，默认宽度会占满父容器的100%
• 父容器的text-align:center会传递给<p>，让<p>内部的文本居中显示，视觉上就呈现出“段落居中”的效果了。

3. 正确的解决方法 #

如果你想保留.row的Flex布局特性，同时让子元素居中，有两种常用方案：

方案一：给.row添加Flex对齐属性 #

直接给你的#example设置Flex布局的水平对齐属性，这是最贴合Bootstrap设计思路的做法：

#example {
  justify-content: center; /* 控制Flex子元素整体水平居中 */
}

方案二：给子元素设置margin:auto #

如果只想让单个子元素居中，可以给<p>添加自动外边距，利用Flex布局中margin:auto自动分配剩余空间的特性：

<div class="row" id="example">
  <p style="margin: 0 auto;">Example.</p>
</div>

额外提醒：.row建议搭配.col使用 #

虽然你可以直接在.row里放<p>，但Bootstrap网格系统的设计逻辑是.row的直接子元素应该是.col-*类元素，这样能更好地利用响应式布局能力。比如：

<div class="row" id="example">
  <div class="col">
    <p style="text-align:center;">Example.</p>
  </div>
</div>

这种情况下，直接给.col设置text-align:center就能让内部文本居中，也符合Bootstrap的规范。

内容的提问来源于stack exchange，提问作者Spencer Hill