关于CSS text-align:center;属性的疑问及a标签居中问题咨询

一、text-align:center的作用范围 #

text-align:center的核心作用是：让元素自身内容盒内的行内/行内块级内容水平居中，并非直接相对于父容器居中。

拿你给出的例子来说：

<div>
  <p>XYZ</p>
</div>

p{
  text-align:center;
}

你的理解完全正确——这段代码是让<p>的内容XYZ在<p>自身的盒模型内居中。因为<p>默认是块级元素，宽度会自动撑满父容器<div>，所以视觉上看起来像是内容在<div>里居中，但本质是内容在<p>自己的内容盒里对齐。

二、a标签设置text-align:center无效的原因 #

先看你的代码：

<div>
  <a href="#">XYZ</a>
</div>

当给<a>单独设置：

a{
  text-align:center;
}

之所以看不到居中效果，是因为<a>默认是行内元素，它的内容盒宽度只由内部文本XYZ的宽度决定，和文本本身一样宽。这种情况下，text-align:center没有可发挥的空间——内容本来就在自己的窄盒子里居中。

而给<div>设置：

div{
  text-align:center;
}

时，<div>是块级元素，宽度撑满父容器，text-align:center会让<div>内部的所有行内/行内块元素（包括<a>）在<div>的内容盒中水平居中，所以<a>就会呈现出在<div>里居中的效果。

内容的提问来源于stack exchange，提问作者Deepak kumar soni