CSS: Es wird versucht, ein Element mit untergeordneten Elementen unterschiedlicher Größe vertikal zu zentrieren

Question

Hallo zusammen, das ist das Bild, das ich bisher habe

Ich habe ein Raster mit 3 Zeilen und 3 Spalten (jede Spalte hat minimalen Inhalt) Ich zentriere die Elemente in jeder Zelle. Sieht toll aus, aber wenn mein Titel wirklich groß wird, wird der Abstand zwischen dem Schalter und der Kategorie zu groß:

Jetzt habe ich versucht, eine mittlere Zeile in einem Div-Container zu erstellen und Flex zu verwenden, aber die Elemente werden nicht zentriert, da die Größe einer Kategorie größer ist als die der anderen.

Ich habe auch versucht, die Kategorien auf die gleiche Größe zu bringen, aber wenn ich die gesamte Komponente irgendwo auf der Seite zentriert hätte, wäre sie aufgrund des Leerraums für die kleinere Kategorie zu weit rechts gelegen.

Irgendeine Idee, wie man diesen Platz verkleinern kann, aber den Schalter genau in der Mitte des Titels und der Schaltfläche belassen kann?

Der Code lautet wie folgt:

HTML:

<div class="category-switch">
  <div class="form-check category-switch__btn">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label form-label">Disable</label>
  </div>
  <div class="category-switch__switch">
    <div class="switch">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" />
        <label class="form-check-label form-label"></label>
      </div>
      <span class="switch__slider switch__round"></span>
    </div>
  </div>
  <span class="category-switch__category category-switch__category--1">Male</span>
  <span class="category-switch__category category-switch__category--2">Female</span>
  <span class="category-switch__title">gender</span>
</div>

Und SCSS-Code:

.category-switch {
    // The grid to place the items
    display: grid;
    grid-template-columns: repeat(3, min-content);
    grid-template-rows: repeat(3, min-content);
    gap: 0.8rem;
    place-items: center;
    justify-items: center;
    // Makes the component be the width of its content
    width: max-content;

    // Title
    &__title {
        grid-row: 1/2;
        grid-column: 2/3;
        font-weight: bold;
        text-transform: capitalize;
    }

    // Placing category text
    &__category {
        &--1 {
            grid-row: 2/3;
            grid-column: 1/2;
        }

        &--2 {
            grid-row: 2/3;
            grid-column: 3/4;
        }
    }

    // The switch position
    &__switch {
        grid-row: 2/3;
        grid-column: 2/3;
    }

    // The button css
    &__btn {
        grid-row: 3/4;
        grid-column: 2/3;
        display: grid;
        place-items: center;
        position: relative;
        width: 7rem;
        height: 2.8rem;
        background: #d02b2b;
        border-radius: 0.5rem;
    }
}

Ich habe versucht, den Code so minimal wie möglich zu halten und einige Dinge entfernt, die nichts mit der Positionierung von SCSS zu tun haben.

Answer 1

在编辑之前我已经写了这个...... 如果类名不同，很抱歉。 这只是一个模板。

        #mainContainer{
            display:grid;
            grid-template-columns: 100px fit-content(10%) 100px;
            column-gap: 20px;
            grid-row-gap: 20px;
            /* adjust your template here */
        }
        #mainContainer div{
            display:grid;
            align-content: center;
            justify-content: center;
            border:1px solid #000000;
        }
        .top{
            font-size:1.6em;
            font-weight: bold;
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 1;
        }
        .left{
            font-size:1.6em;
            font-weight: bold;
        }
        .right{
            font-size:1.6em;
            font-weight: bold;
        }
        .bottom{
            background-color: orangered;
            border-radius: 10px;
            height:30px;
        }

    

        

            Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
        
        

            male
        
        

            
        
        

            female
        
        

        

            Disable
        
        

    

希望对你有帮助。 祝你有美好的一天。