<p>标签本身不控制对齐，HTML5已废弃align属性；必须用CSS的text-align作用于块级容器来对齐其内部行内内容，而<p>自身居中需用margin: 0 auto或Flex布局。
<p> 标签本身不参与“层级对齐”控制，它只定义段落语义；真正影响对齐效果的是它的父容器、CSS 样式或已废弃的 align 属性——而后者在 HTML5 中已被移除。
为什么 <p align="center"> 在现代项目里经常失效
这个写法曾广泛用于早期 HTML，但 HTML5 明确废弃了所有元素的 align 属性（包括 <p>、<div>、<h1> 等）。浏览器虽可能兼容渲染，但属于“非标准行为”，且：
- 无法通过 W3C 验证
- 与 CSS 优先级冲突（比如同时写了
style="text-align: left"和align="right"，结果不可控） - 在 strict 模式或某些框架（如 React/Vue 的 SSR 渲染）中直接被忽略
用 text-align 实现段落水平对齐的正确姿势
必须通过 CSS 控制，且推荐内联样式或 class 方式。注意：该属性作用于**行内内容**（文字、<span>、<img> 等），不是让 <p> 自身居中。
常见写法示例：
立即学习“前端免费学习笔记（深入）”；
<p style="text-align: center">这段文字居中</p> <p class="text-right">右对齐段落</p>
对应 CSS：
.text-right { text-align: right; }
关键点：
-
text-align只影响子元素的**文本对齐方式**，不影响块级元素自身的 margin 居中 - 若想让整个
<p>在页面中水平居中（比如宽度固定时），需配合margin: 0 auto+width - 响应式场景下，避免用像素值写死 width，改用
max-width或 flex 布局更稳妥
嵌套结构中对齐行为容易混淆的边界情况
当 <p> 套在 <div> 或 <section> 里时，对齐效果由“谁设了 text-align”决定，不是看标签层级深浅，而是看 CSS 继承链。
例如：
<div style="text-align: right"> <p>我也会右对齐</p> <p style="text-align: left">但我被显式覆盖了</p> </div>
注意：
-
text-align是可继承属性，子元素默认继承父级值 - 但
<table>、<form>等部分元素会重置该值，不能假设所有后代都继承 - Flex 容器内的子项（如
<p>）不受父级text-align影响，得用justify-content或align-self
真正难处理的从来不是怎么写对齐，而是搞清「对齐作用对象」和「样式生效范围」——这两个点一旦错位，调试时就会反复怀疑是不是浏览器 bug。
