如何保持HTML结构不变 让h1内span居左、其余文本相对父容器居中

无需修改现有HTML结构，仅通过CSS即可实现需求，共有两种常见实现方式： #

方案1：文本对齐+绝对定位（兼容性最好，支持所有主流浏览器） #

/* 保证container是定位上下文，此处保留你原有container的宽度、内边距等样式即可 */
.container {
  position: relative;
}
h1 {
  /* 让未被特殊定位的普通文本居中 */
  text-align: center;
  position: relative;
  /* 按需保留原有margin、padding等样式即可 */
}
h1 > span {
  /* 脱离文档流，不影响后续文本的居中计算 */
  position: absolute;
  left: 0;
  /* 保证和右侧文本垂直对齐，不需要可以直接删除 */
  top: 50%;
  transform: translateY(-50%);
}

原理说明： #

• h1默认是块级元素，宽度和父级container完全一致，设置text-align: center后，未被特殊定位的「Animal Wildlife」文本会相对于container水平居中
• span设置绝对定位后脱离正常文档流，固定在h1的最左侧，不会参与后续文本的对齐计算
• 如果container设置了左内边距，只需要把span的left值改为和container的padding-left相同即可，避免span贴到容器边缘

方案2：Flex布局（写法更简洁，适合现代浏览器） #

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
h1 > span {
  position: absolute;
  left: 0;
}

原理说明： #

通过flex的justify-content: center让h1的主内容居中，span绝对定位后固定在左侧，逻辑和方案1一致。

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