text-align属性行为疑惑：为何图片居中方式不符合预期

首先得把你对text-align的核心认知掰过来：text-align不是让子元素继承后对齐自身，而是作用于容器元素，控制其内部的行内/行内块级元素（包括文本、img、a这类）在容器的内容区域里水平对齐。

为什么给header设置text-align:center能让图片居中？ #

你的header是块级容器，默认宽度占满父元素（这里是body）。里面的<a>和<img>默认是行内/行内块元素，它们不会占满header的宽度。给header设置text-align:center后，相当于告诉header：“把你里面所有行内/行内块级的内容，都在你的宽度范围内水平居中排列”，所以图片自然就居中了。

为什么给img直接设置text-align:center没用？ #

img是替换元素，它本身没有内部的文本或行内内容——它的展示就是自身的图像。text-align的作用是“对齐元素内部的行内内容”，给img加这个属性，相当于对着空盒子喊“把你里面的东西居中”，当然不会有任何效果。

为什么把img设为display:block后加text-align:center还是不行？ #

当你把img设为display:block后，它变成了块级元素，但它的“内部内容”还是只有自身的图像，没有可对齐的文本或其他行内元素。这时候text-align:center对它依然无效。

如果要让块级的img在header里居中，应该用块级元素的居中方法：给img设置margin: 0 auto——因为块级元素在父容器里，左右margin设为auto时，会自动均分父容器的剩余空间，从而实现水平居中。

对比p元素的情况 #

p是块级元素，它的内部是文本（行内元素），所以给p设置text-align:center，是让p内部的文本在p的宽度范围内居中，这和img的情况完全不同——p有可对齐的内部行内内容，而img没有。

代码验证 #

原代码能生效的原因就是header作为容器控制了内部行内元素的对齐：

body {
  margin: 0;
}

header {
  background-color: black;
  height: 100px;
  text-align: center; /* 控制内部行内元素居中 */
}

img {
  height: 100%;
}

<body>
  <header>
    <a href=""><img src="logo.png" alt="Logo image"></a>
  </header>
</body>

如果要把img设为块级元素来居中，修改CSS如下即可：

header {
  background-color: black;
  height: 100px;
}

img {
  height: 100%;
  display: block;
  margin: 0 auto; /* 块级元素居中方法 */
}

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