text-align用于控制块级元素内行内内容的水平对齐，不影响块自身位置；常用值有left、center、right、justify；需确保父容器有明确宽度且含行内内容才生效。
用 text-align 控制段落和容器内文字对齐
新手最容易上手的方式就是给 <p>、<div> 这类块级元素加 text-align CSS 属性。它只影响**内部的行内内容（比如文字、图片、<span>）**，不影响块本身的位置。
常见取值和效果：
-
text-align: left：默认值，左对齐（中文网页最常用） -
text-align: center：居中——注意，是“内容在容器里水平居中”，不是整个容器居中 -
text-align: right：右对齐 -
text-align: justify：两端对齐（英文效果明显，中文基本看不出差别）
示例写法：
<p style="text-align: center;">这行字会居中显示</p>
⚠️ 容易踩的坑：text-align 对 <div> 本身没用，如果你给一个空 <div> 加 text-align: center，什么也不会发生；必须里面放了文字或行内元素才看得见效果。
立即学习“前端免费学习笔记（深入）”；
为什么 text-align: center 没生效？检查父容器宽度
新手常遇到“写了 text-align: center 但文字还是靠左”，大概率是因为父容器没设宽度，或者宽度撑满了整行。
典型问题场景：
- 直接写在
<body>或全宽<div>上，浏览器按默认 100% 宽度渲染，居中自然看不出来 - 用了
display: flex或float后，text-align失效（它只对常规流中的行内内容起作用） - 文字本身是
inline-block且没有换行，可能被当作一个整体对齐，而非逐字对齐
解决办法很简单：确保父容器有明确宽度，或用更直观的方式验证，比如临时加个背景色：
<div style="background: #eee; width: 300px; text-align: center;">试试看</div>
标题（<h1>–<h6>）也能用 text-align，但别滥用
标题标签默认是块级元素，所以可以像 <p> 一样设置 text-align：
<h2 style="text-align: right;">右侧标题</h2>
但要注意两点：
- 语义优先：标题对齐应服务于内容结构，不是为了“看起来好看”。比如整站标题统一左对齐，突然某个
<h3>右对齐，反而干扰阅读节奏 - 响应式风险：在小屏幕上，右对齐标题可能紧贴边缘，文字被截断，而居中或左对齐容错性更高
如果只是为了“让标题在页面中间”，更稳妥的做法是控制其父容器宽度 + text-align: center，而不是直接动标题样式。
想让整个盒子（比如按钮、卡片）居中？别只靠 text-align
新手容易混淆：看到按钮文字居中了，就以为按钮也居中了。其实 text-align 只管按钮里的字；按钮自己还在左上角。
真正让块级元素水平居中，得用别的方法：
- 固定宽度 +
margin: 0 auto（经典可靠，兼容所有浏览器） -
display: flex+justify-content: center（现代布局首选） -
display: grid+place-items: center（适合单个子元素居中）
例如：
<div style="width: 200px; margin: 0 auto;"><button>我居中了</button></div>
这里 text-align 不参与，起作用的是外层 <div> 的 margin 设置。记住：对齐文字 ≠ 对齐容器——这是新手最常卡住的地方。
