text-align仅控制块级元素内行内内容的水平对齐,不适用于垂直居中;常用值为left、right、center、justify;对浮动元素无效,表格单元格需单独设置,非父容器继承。

用 text-align 控制段落和块级元素的水平对齐
HTML 本身没有直接设置文本对齐的属性,必须靠 CSS 的 text-align。它只对块级元素(比如 <p></p>、<div>、<code><h1></h1>)生效,对纯文本或行内元素(如 <span></span>)设了也没用——除非那个 <span></span> 被设成了 display: block。
常见写法是加在 <style></style> 标签里,或者写进外部 CSS 文件:
<style>
p { text-align: center; }
.intro { text-align: right; }
</style>
-
left、right、center是最常用值;justify可实现两端对齐,但中文效果常不理想(字距拉得太开) - 别在
<div> 上乱设 <code>text-align: center后又指望里面浮动元素也居中——浮动会脱离文档流,text-align拿它没辙 - 如果整个页面文字都偏左,但某一段想居中,优先给那段加 class,而不是改全局
p样式,避免副作用
内联样式也能快速试效果,但别长期这么干
临时调试时,可以直接在标签上加 style 属性:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
<p style="text-align: center;">这段文字会居中</p>
这确实快,但问题明显:
- 样式和结构混在一起,后期改对齐方式得挨个翻 HTML,没法批量调整
- 如果多个地方都要居中,复制粘贴容易漏改,还可能写错大小写(
Center不合法,必须小写center) - 浏览器开发者工具里看到的
style属性权重最高,会覆盖外部 CSS,干扰调试判断
表格里的文字对齐要单独处理
表格(<table>)是个特例:<code>text-align 对 <td> 和 <code><th> 有效,但老代码里有人还在用已废弃的 <code>align 属性(如 <td align="right">)。现在必须用 CSS:
<pre class="brush:php;toolbar:false;"><style>
td, th { text-align: left; }
td.price { text-align: right; }
</style></pre>
<ul><li>别只给 <code><table> 设 <code>text-align,它不会自动继承到单元格——CSS 中 text-align 不继承自父容器的块级元素,但会继承自 或更上层的样式规则
center;常规描述文字保持 left
垂直居中不是 text-align 管的事
新手常误以为 text-align: center 能让文字上下居中,结果发现没反应。这是根本性误解:text-align 只管水平方向(左/中/右),垂直方向得换方法:
- 单行文本:给容器加
line-height等于容器高度(前提是高度固定) - 多行文本或任意内容:用 Flexbox,比如
display: flex; align-items: center; justify-content: center; - 绝对定位 +
transform: translate(-50%, -50%)也行,但需要已知宽高或额外处理
把 text-align 当万能居中工具,是初学 CSS 最容易卡住的地方。










