父元素设text-align:center后段落未居中的原因咨询

看起来你的.intro容器设置了text-align: center，但里面的<p>没居中，大概率是样式优先级继承被打断或者被其他样式覆盖了，结合你的代码，我整理了几个最可能的原因：

可能的原因 #

1. .subtitle类有独立的text-align样式 #

如果你的代码里还有其他CSS规则给.subtitle设置了text-align（比如text-align: left），那么类选择器的优先级会高于从父级继承来的样式，导致段落不居中。比如：

/* 这种情况会直接覆盖继承的居中 */
.subtitle {
  text-align: left;
  /* 其他样式 */
}

2. 中间容器.hero-text重置了文本对齐 #

你的<h1>和<p>都放在.hero-text这个<div>里，如果这个容器自己设置了text-align属性，那么它的子元素会优先继承这个容器的样式，而不是外层的.intro。比如：

.hero-text {
  text-align: left; /* 这个会覆盖父级的center */
}

3. 全局<p>标签样式干扰 #

如果你的CSS里有全局的<p>样式（比如p { text-align: left; }），虽然.subtitle是类选择器优先级更高，但如果全局样式用了更具体的选择器（比如.hero-text p），也会导致段落不居中。

快速解决方法 #

你可以直接给.subtitle明确设置居中，或者让它继承父级的样式：

/* 方法1：直接设置居中 */
.subtitle {
  text-align: center;
}

/* 方法2：强制继承父级的text-align */
.subtitle {
  text-align: inherit;
}

另外，也可以检查浏览器的开发者工具（F12），选中这个<p>元素，查看Styles面板里的text-align属性，看哪个规则在生效，这样就能精准定位问题啦。

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