为何给header设置text-align:center生效，给其子元素h1设置却不生效？

核心原因 #

text-align 是作用于块级元素的属性，控制的是该元素内部的行内内容、行内块级内容的对齐方式，不会让元素本身在父容器里居中。

两种场景的具体逻辑 #

• 当text-align: center写在header上时：
  header是宽度100%的块级元素，你给header h1设置了display: inline-block，所以h1属于header的行内块级子元素，会被header的text-align属性控制，整个h1盒子在header内部居中，视觉效果符合预期。
• 当text-align: center移到header h1上时：
  h1是inline-block元素，宽度默认由内部文本内容撑开，和文本本身的宽度完全一致。此时你给h1加text-align，只是让h1内部的文本在h1自己的宽度范围内居中，文本宽度和h1宽度相同，所以看不出任何效果；同时父级header没有设置text-align，作为行内块的h1默认左对齐，所以整个h1盒子会贴在header左侧，就出现了第二张图的效果。

适配需求的解决方案 #

你的需求是仅让h1文本居中，不影响header下其他元素的对齐，推荐两种可行方案：

方案1：调整h1为块级元素，通过margin居中 #

header {
    position: fixed;
    width: 100%;
    color: black;
    background: yellow;
    border-width: medium;
    border-color: black;
    z-index: 1;
    top: 0;
    left: 0;
}

header h1 {
    padding: 10px 10px;
    border: 8px solid black;
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

方案2：保留h1的inline-block属性，单独调整其他子元素对齐 #

如果有必须保留h1为inline-block的场景，可以给header加text-align: center，其他需要左对齐的header子元素单独设置text-align: left即可，对整体布局影响极小。

内容的提问来源于stack exchange，提问作者Игорь Середа