Description

I am developing a random name picker web app and I'd like to know how to make three texts positioned on top of each slot and aligned center in each slot simultaneously.

The current image of the website looks like this.

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
}

I have eventually grouped each text and slot for the solution.

Pug:

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

Sass:

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