如何让H1文本保持居中，不受左侧元素及新增文本挤压？

问题原因 #

你给左侧导航设置了float: left，这会让导航脱离正常文档流，导致h1的text-align: center是相对于导航右侧到容器右侧的剩余空间居中，而非整个容器的水平中心，所以文本看起来偏右；添加更多内容时，剩余空间被挤压，h1文本的居中位置也会跟着偏移。

推荐解决方案：Flexbox布局（现代、灵活） #

用Flexbox重构布局，让导航和h1在同一行，同时h1文本始终相对于整个容器居中：

修改后的HTML（添加容器包裹导航和h1）

<div class="header-container">
  <div class="navigation">
    <a href="#planets" class="planet">Planets</a>
  </div>
  <h1>Solar System 18413</h1>
</div>

修改后的CSS

/* 用flex容器控制整体布局 */
.header-container {
  display: flex;
  align-items: center; /* 让导航和h1垂直居中对齐 */
  padding: 0 1rem; /* 给容器加左右内边距，避免内容贴边 */
}

h1 {
  font-size: 50px;
  text-align: center;
  flex: 1; /* 让h1占据容器剩余的所有空间 */
  margin: 0; /* 清除h1默认的上下外边距 */
}

.navigation {
  font-weight: bold;
  border-radius: 5px;
  background-color: #dad9d9;
  padding: 0.5rem 1rem; /* 给按钮加内边距，提升视觉效果 */
  margin-right: 1rem; /* 和h1保持间距，避免太拥挤 */
}

.planet {
  text-decoration: none; /* 去掉链接默认下划线 */
  color: #333; /* 设置链接颜色，可根据需求调整 */
}

备选方案：绝对定位导航（无需调整HTML结构） #

如果不想修改HTML结构，可以用绝对定位让导航脱离文档流，不影响h1的宽度计算：

修改后的CSS

body {
  position: relative;
  margin: 0;
  padding-left: 90px; /* 给左侧导航留出空间，避免h1文本被遮挡 */
}

h1 {
  font-size: 50px;
  text-align: center;
  margin: 1rem 0; /* 调整上下外边距，控制垂直位置 */
}

.navigation {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-weight: bold;
  border-radius: 5px;
  background-color: #dad9d9;
  padding: 0.5rem 1rem;
}

.planet {
  text-decoration: none;
  color: #333;
}

说明 #

• Flexbox方案更推荐，它能自适应不同屏幕尺寸，布局逻辑清晰，后续添加其他元素也更容易扩展。
• 绝对定位方案适合不想改动HTML结构的场景，但需要手动设置padding避免文本被导航遮挡，灵活性稍差。

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