应使用text-align CSS属性实现段落水平对齐，因HTML5已废弃所有align内联属性（如），其在严格模式、无障碍检测及现代布局中均不可靠且违反语义分离原则。

直接用 text-align 写 CSS，别碰 align 属性——HTML5 已废弃所有带 align 的内联属性（如 <p align="center"></p>），现代浏览器虽可能渲染，但会触发 HTML 验证警告，且在严格模式或无障碍检测中被判定为错误。

怎么给段落加水平对齐（left/center/right/justify）

用 text-align 作用于块级容器（如 <p></p>、<div>、<code><h2></h2>），它只控制内部行内内容（文字、<span></span>、图片等）的水平位置，不移动元素自身。

• 写法示例：

  <p class="intro">这是一段介绍文字</p>

  ，对应 CSS：

  .intro { text-align: justify; }

• text-align: justify 在中文下效果有限——浏览器不会自动断字，仅靠空格和标点撑开，常导致字间距过宽或最后一行悬空；若真需两端对齐，得配合 hyphens: auto + lang="zh"，且需字体支持
• 避免对 <div> 这类无语义容器滥用 <code>text-align，容易干扰子元素的布局逻辑（比如里面放了 flex 子项，text-align 就完全无效）

  为什么

  不推荐用了

  这个写法在 HTML4 里合法，但在 HTML5 中属于过时（obsolete）属性。W3C 明确要求用 CSS 替代。

  • DevTools 控制台可能不报错，但运行 document.querySelector('p').hasAttribute('align') 仍会返回 true，说明 DOM 里还留着这个“历史包袱”，但语义已失效
  • 当页面启用 Shadow DOM 或使用 Web Components 时，align 属性会被忽略，CSS 则稳定生效
  • 屏幕阅读器可能跳过或误读含废弃属性的段落，影响无障碍访问（WCAG 4.1.1 合规性风险）

  段落之间距离怎么调才不翻车

  浏览器默认给 <p></p> 加了上下 margin（约 1em），这是唯一该动的地方——别改 padding、line-height 或 height。

  • 统一重置：

    p { margin: 0.8em 0; }

    ，比默认略紧凑，又保留呼吸感
  • 首段顶部、末段底部多余空白？用 :first-of-type 和 :last-of-type 单独清除：

    p:first-of-type { margin-top: 0; } p:last-of-type { margin-bottom: 0; }

  • 如果父容器是 Flex 或 Grid，优先用 gap 控制段落间距，更可控且不会引发 margin 折叠问题

  真正难的不是怎么对齐，而是判断该对齐谁：是段落里的文字？整个段落块？还是段落里的某张图？选错目标，再改十遍 text-align 都没用。