如何通过纯CSS实现居中主标题与副标题起始位置精准对齐

当然有纯CSS的解决方案！不用写JavaScript也能完美实现你要的效果——让副标题的起始位置和主标题完全对齐，同时整体在页面居中，还能适配所有屏幕尺寸。下面给你推荐几个靠谱的方法：

方法1：Inline-block + 容器居中 #

这是兼容性最好的方案，几乎支持所有浏览器。核心思路是把两个标题放在一个容器里，让容器整体居中，同时让标题内部左对齐：

<div class="headline-container">
  <h1 class="sofortcheck__headline--mobile">Check your situation for free</h1>
  <h2 class="sofortcheck__subheader--mobile">Only <span>2 minutes</span></h2>
</div>

.headline-container {
  text-align: center; /* 容器整体居中 */
}

.sofortcheck__headline--mobile,
.sofortcheck__subheader--mobile {
  display: inline-block; /* 让标题宽度由内容决定 */
  text-align: left; /* 标题内部文字左对齐 */
  width: auto; /* 确保宽度自适应内容 */
  margin: 0; /* 清除默认外边距避免干扰 */
}

原理：容器的text-align: center会让内部的inline-block元素居中，而标题自身的text-align: left会让文字左对齐，这样副标题的左侧就会和主标题的左侧完全对齐，不管屏幕多大都能自适应。

方法2：Grid布局 #

如果你只需要支持现代浏览器，Grid布局会更简洁：

<div class="headline-container">
  <h1 class="sofortcheck__headline--mobile">Check your situation for free</h1>
  <h2 class="sofortcheck__subheader--mobile">Only <span>2 minutes</span></h2>
</div>

.headline-container {
  display: grid;
  justify-items: start; /* 让子元素左对齐 */
  margin: 0 auto; /* 容器整体水平居中 */
  width: fit-content; /* 容器宽度由内容决定 */
}

/* 可以保留原有的标题样式，不需要额外修改 */

原理：width: fit-content让容器宽度刚好包裹住最长的主标题，margin: 0 auto让容器居中，justify-items: start让两个标题都向左对齐，自然就实现了副标题和主标题左侧对齐的效果。

方法3：Flexbox布局 #

Flexbox也是现代浏览器的好选择，代码同样简洁：

<div class="headline-container">
  <h1 class="sofortcheck__headline--mobile">Check your situation for free</h1>
  <h2 class="sofortcheck__subheader--mobile">Only <span>2 minutes</span></h2>
</div>

.headline-container {
  display: flex;
  flex-direction: column; /* 垂直排列标题 */
  align-items: flex-start; /* 子元素左对齐 */
  margin: 0 auto; /* 容器整体居中 */
  width: fit-content; /* 容器宽度适配内容 */
}

原理和Grid类似，width: fit-content让容器宽度匹配主标题，垂直排列的子元素通过align-items: flex-start左对齐，整体容器居中后，副标题就会和主标题左侧完全对齐。

总结 #

• 如果需要兼容旧浏览器（比如IE11），优先选方法1；
• 如果只需要支持现代浏览器，方法2或3会更简洁，代码量更少；
• 所有方法都用了相对适配的方式，没有固定px值，完全能适配不同尺寸的屏幕。

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