如何让不同字号的文本对齐同一基线？

问题现状 #

目前通过为小字号文本容器添加margin-bottom实现了不同字号文本对齐同一基线，但希望能有更优雅、响应式的实现方案。

已尝试方案 #

• 尝试结合Flexbox使用align-items: baseline，但仅首个文本对齐基线，其余文本均位于基线下方。
• 为所有元素设置position: absolute并使用margin/浮动，在不同屏幕尺寸下维护成本极高。

解决方案 #

核心思路是利用Flexbox的基线对齐特性，同时让多行文本容器的基线指向最后一行文本的基线，彻底摆脱硬编码的margin值。

调整后的代码 #

CSS

.main {
  display: flex;
  align-items: baseline; /* 核心：所有子元素基于基线对齐 */
  gap: 1rem; /* 优雅的间距控制，替代手动margin */
  position: relative; /* 用于基线验证线的定位 */
}

.big {
  font-size: 13rem;
  font-family: Jost;
  line-height: 1; /* 重置行高，避免额外空间干扰基线位置 */
}

.small {
  font-size: 1rem;
  font-family: "Crimson Text";
  font-style: italic;
  display: inline-block; /* 让容器基线等于内部最后一行文本的基线 */
  line-height: 1.2; /* 正常设置行高，不影响对齐效果 */
}

.line {
  position: absolute;
  width: 100%;
  border: 1px solid red;
  height: 2px;
  bottom: 0; /* 与.main底部对齐，直观验证基线位置 */
}

HTML

<div class="main">
  <span class="big">BIG</span>
  <span class="small">
    <span class="word">Sony A7III</span>
    <span class="word">16-35mm and 85mm</span>
    <span class="word">Nikon D810</span>
    <span class="word">Landscape and Moments</span>
    <span class="word">Photography and Film</span>
  </span>
  <div class="big">WORD</div>
</div>
<div class="line"></div>

关键优化点 #

• Flexbox基线对齐：通过align-items: baseline让所有直接子元素自动对齐基线，无需手动计算偏移。
• 多行文本容器适配：将.small设为inline-block，使其基线自动绑定内部最后一行文本的基线，解决了之前仅首个文本对齐的问题。
• 响应式友好：用gap控制元素间距，替代硬编码margin；行高重置确保不同字号的基线位置准确，适配各种屏幕尺寸。
• 低维护成本：无需依赖绝对定位或手动调整margin，样式逻辑清晰，后续修改字体大小或文本内容时无需重新校准对齐。

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