为何text-align:center对包含文本的ul元素不生效？

这个问题其实是混淆了text-align: center的核心作用逻辑——它控制的是容器元素内部的行内/行内块级内容的对齐方式，而非块级元素本身的位置。咱们一步步拆解清楚：

1. text-align: center的本质 #

text-align是给容器元素设置的属性，它只会影响容器里的这些类型的内容：

• 行内元素（比如<span>、文本节点）
• 行内块元素（display: inline-block）
• 其他具有行内特性的元素（比如inline-table）

它完全不会改变块级元素本身的位置——因为块级元素默认会占满父容器的宽度，即使你给父容器加了text-align: center，块级元素也还是撑满整个宽度，自然看不出“居中”的效果。

2. 为什么header看起来“生效”了？ #

你看到的header上text-align: center生效，其实是header内部的行内文本/元素被居中了，而不是header元素本身居中。

举个例子：

header {
  text-align: center;
  /* 假设header默认是块级元素，宽度100% */
  border: 1px solid red; /* 加个边框看得更清楚 */
}

这时候header的边框会撑满父容器，但里面的文字会在红色边框里居中显示——这就是text-align: center的作用，它管的是容器内部内容，不是容器自己。

3. ul和blockquote的区别在哪里？ #

ul和blockquote本身是块级元素，默认宽度100%，所以：

• 如果你给它们的父容器加text-align: center，只会让ul里的<li>文本、blockquote里的文本内部居中，但ul/blockquote元素本身还是撑满父容器，看起来没“居中”。
• 如果你想要ul/blockquote元素本身在父容器里居中，就需要把它们改成display: inline-block——这样它们的宽度不再是100%，而是由内容决定，此时父容器的text-align: center就能让这个行内块元素整体居中了。

对比代码示例：

无效的情况（ul默认块级） #

.parent {
  text-align: center;
}
ul {
  border: 1px solid blue;
  /* 默认display:block，宽度100% */
}

此时ul的蓝色边框撑满父容器，里面的li文本会居中，但ul本身没居中。

有效的情况（ul设为inline-block） #

.parent {
  text-align: center;
}
ul {
  display: inline-block;
  border: 1px solid blue;
}

此时ul的蓝色边框宽度由内容决定，整个ul会在父容器里居中显示。

总结一句话 #

text-align: center从来不是用来让块级元素本身居中的——它管的是容器内部行内内容的对齐。如果要让块级元素本身居中，除了改成inline-block，你也可以用margin: 0 auto（前提是块级元素有明确的宽度）。

内容的提问来源于stack exchange，提问作者nCardot