如何让三段文本分别定位在每个Slot上方并居中对齐？

我正在开发一款随机选名Web应用，希望实现三段文本分别定位在每个Slot的上方，同时每段文本都能在对应Slot的范围内居中对齐。当前网站效果如下：

当前使用的Pug/Jade代码 #

#lucky-draw
.title
  //- Pug loader currently does not handle webpack alias so we will use relative path here
  include ../assets/images/title.svg

.slots-header-container
  .slot-text-left
    p Left Additional Text

  .slot-text-center
    p Center Additional Text

  .slot-text-right
    p Right Additional Text

.slots-container
  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

button#draw-button.solid-button Run!

当前使用的Sass代码 #

.slots-header-container{
  text-align: center;
  position: absolute;
  top: 20%; // Adjust as needed to move them further upward
  width: 100%;
}

.slot-text-left {
  left: 0;
  margin-left: 10px; // Adjust as needed
}

.slot-text-right {
  right: 0;
  margin-right: 10px; // Adjust as needed
}

解决方案 #

要让三段文本精准对应每个Slot上方并居中，需调整样式使文本容器与Slot布局匹配：

修改后的Sass代码

// 确保Slots容器使用Flex布局（若未设置）
.slots-container {
  display: flex;
  justify-content: center;
  gap: 20px; // 与Slot间距保持一致，按需调整
  width: 100%;
}

.slots-header-container {
  position: absolute;
  top: 15%; // 调整至Slot上方合适位置
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px; // 与.slots-container的gap值一致
}

// 让每个文本容器宽度与对应Slot匹配，文本居中
.slot-text-left,
.slot-text-center,
.slot-text-right {
  width: calc((100% - 40px) / 3); // 计算宽度：总宽度减去两个gap，平分三份
  text-align: center;
}

// 若Slot为固定宽度，直接设置文本容器宽度更精准
// 示例：Slot宽度200px时
// .slot-text-left,
// .slot-text-center,
// .slot-text-right {
//   width: 200px;
//   text-align: center;
// }

说明

• 通过给.slots-header-container应用与.slots-container一致的Flex布局和间距，确保文本容器与Slot在水平位置上一一对应。
• 设置text-align: center让文本在自身容器内居中，实现“对应Slot范围内居中”的需求。
• 若Slot有固定宽度，直接给文本容器设置相同宽度，定位会更精准。

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