CSS: Cuba memusatkan elemen secara menegak dengan kanak-kanak dengan saiz yang tidak sama

Question

Hello semua, ini gambar yang saya ada sekarang

Saya mempunyai grid dengan 3 baris dan 3 lajur (setiap lajur adalah kandungan minimum) Saya memusatkan elemen dalam setiap sel. Nampak hebat, tetapi jika tajuk saya menjadi sangat besar, ruang antara suis dan kategori menjadi terlalu besar:

Kini saya cuba membuat baris tengah di dalam bekas div dan menggunakan flex, tetapi elemen tidak akan dipusatkan kerana saiz satu kategori lebih besar daripada yang lain.

Saya juga cuba membuat kategori dengan saiz yang sama, tetapi apabila saya memusatkan keseluruhan komponen di suatu tempat pada halaman, ia akan menjadi terlalu jauh ke kanan kerana ruang putih untuk kategori yang lebih kecil.

Ada idea bagaimana untuk menjadikan ruang itu lebih kecil tetapi mengekalkan suis betul-betul di tengah-tengah tajuk dan butang?

Kod adalah seperti berikut:

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>

Dan kod scss:

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

Cuba mengekalkan kod seminimum mungkin dan mengalih keluar beberapa perkara yang tiada kaitan dengan scss kedudukan.

Answer 1

Saya menulis ini sebelum mengedit… Maaf jika nama kelas berbeza. Ini hanyalah templat.

        #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
        
        

    

Semoga ia membantu anda. Semoga hari anda indah.