CSS : essayer de centrer verticalement un élément avec des enfants de tailles inégales

Question

Bonjour à tous, voici la photo que j'ai jusqu'à présent

J'ai une grille avec 3 lignes et 3 colonnes (chaque colonne a un contenu minimal) Je centre les éléments dans chaque cellule. Ça a l'air génial, mais si mon titre devient vraiment gros, l'espace entre le commutateur et la catégorie devient trop grand :

Maintenant, j'ai essayé de créer une ligne du milieu à l'intérieur d'un conteneur div et d'utiliser flex, mais les éléments ne seront pas centrés car la taille d'une catégorie est plus grande que l'autre.

J'ai également essayé de donner aux catégories la même taille, mais lorsque je centrais le composant entier quelque part sur la page, il serait trop à droite en raison de l'espace blanc pour la catégorie plus petite.

Une idée pour réduire cet espace tout en gardant le commutateur en plein milieu du titre et du bouton ?

Le code est le suivant :

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>

Et le code 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;
    }
}

J'ai essayé de garder le code aussi minimal que possible et j'ai supprimé certains éléments qui n'ont rien à voir avec le positionnement des scss.

Answer 1

J'ai écrit ceci avant de le modifier… Désolé si les noms de classe sont différents. Ceci est juste un modèle.

        #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
        
        

    

J'espère que cela vous aidera. Passe une bonne journée.