text-align仅对行内内容和行内块级元素有效，对块级子元素无效；需用margin:0 auto、Flexbox等方案实现块级元素居中。
text-align 能对齐哪些内容
只作用于**行内内容**（文字、
、
等）和**行内块级元素**，对块级子元素（如
text-align
、
在父容器里水平居中——这不行，得用
margin: 0 auto
或 Flexbox。
设置左对齐、居中、右对齐的写法
直接在父元素上设置
text-align
，子元素中的文本和行内内容会随之对齐：
/* 左对齐（默认值） */
.parent { text-align: left; }
/ 居中 /
.parent { text-align: center; }
/ 右对齐 /
.parent { text-align: right; }
值不区分大小写，
Center
和
center
都有效
对多行文本，每行独立对齐；不是整段文字整体居中
若父元素宽度小于内容宽度（比如窄容器里放长单词），
text-align: center
仍会让首字符尽可能居中，可能造成视觉偏移
为什么有时候 text-align:center 没生效
最常踩的坑是目标元素本身是块级且未设宽，或内部结构“撑不开”对齐上下文：
父容器没设置宽度，又处于文档流中（比如
默认 100% 宽），
text-align
看起来“没变化”——其实生效了，只是左右空间相等，效果不明显
想居中的内容是
display: block
的子
，它不受
text-align
影响；此时需给该子元素加
display: inline-block
，再配合父元素
text-align: center
使用了
float
或
position: absolute
的元素会脱离文档流，
text-align
对它们完全无效
替代方案：当 text-align 不适用时怎么办
需要真正让块级元素居中（比如卡片、按钮组），
text-align
就不是正解：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
单个块级元素水平居中：用
margin: 0 auto
（前提是设了明确宽度）
多个块级元素并排居中：用
display: flex
+
justify-content: center
响应式/复杂布局：优先考虑
display: grid
或现代 Flexbox，而非强行套用
text-align
真正容易被忽略的是：对齐行为依赖于“谁是父容器”和“谁是被对齐的内容类型”。写之前先确认 DOM 结构层级和 display 类型，比反复调
text-align
更省时间。
相关文章