如何让三个文字分别位于每个槽位的顶部？

Question

我正在开发一个简单的随机名称选择器网站，我想知道如何使三个文本位于每个插槽的顶部并同时在每个插槽中对齐中心。

网站当前的图片是这样的。

哈巴狗/玉：

#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!

萨斯：

.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
}

Answer 1

因为看起来您将把用户操作的结果输出到页面上（例如，当用户按下按钮时显示名称）。考虑使用

<output>

元素 而不是 div。它更具语义性，更易于访问，而且重要的是：可标记 — 这意味着您可以使用

<label>

元素 为其添加标题。

考虑将 HTML 结构更改为类似这样的结构，并使用 CSS flexbox 来确保标签在每个输出上方保持居中。

还要注意不要在同一文档中多次重复相同的 ID，因为这是无效的 HTML。 ID只能使用一次。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.slots {
  display: flex;
  gap: 0.5rem;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slots output {
  width: 20ch;
  height: 2rem;
  display: block;
  border: 1px solid black;
}

<div class="slots">
  <label class="slot">
    <span>Left</span>
    <output id="slot-left" for="run-button"></output>
  </label>
  <label class="slot">
    <span>Center</span>
    <output id="slot-center" for="run-button"></output>
  </label>
  <label class="slot">
    <span>Right</span>
    <output id="slot-right" for="run-button"></output>
  </label>
</div>
<button type="button" id="run-button">Run!</button>

Answer 2

我最终将解决方案的每个文本和插槽分组。

帕格：

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

.slots-container
  .slot-group
    .slot-text
      p Song Title

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

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

  .slot-group
    .slot-text
      p Genre

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

      #sunburst.sunburst
        img(src="~@images/sunburst.svg" alt="sunburst")
        
  .slot-group
    .slot-text
      p Style

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

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

button#draw-button.solid-button Run!

萨斯：

.slot-group {
  display: flex;
  flex-direction: column;
  align-items: center;

  .slot-text{
    font-size: 30px;
  }

  .slot-text,
    .slot {
      text-align: center;
      margin-bottom: 10px; // Adjust spacing between text and slot
    }

  .slot {
    margin-right: 10px; // Adjust spacing between slots as needed
  }
}