Il était difficile d'aligner les éléments tels que la zone de texte du héros, l'appel à l'action, les images, les boutons au centre de l'écran ou une direction verticale.
Mais maintenant, c'est vraiment simple avec les grilles CSS et flexbox.
Comme vous le savez peut-être déjà, CSS Grid est le nouveau standard de mise en page pour le Web.
L'alignement vertical de la grille CSS est un concept consistant à déplacer les enfants de la grille souhaités dans la direction Y ou verticale.
Une image rapide pour comprendre ce qui est vertical et horizontal :
Vous pouvez voir une image d'ordinateur portable , qui est un enfant du conteneur CSS Grid.
Pour le déplacer au milieu, vous pouvez utiliser align-items: center ;
De la même manière, vous pouvez utiliser d’autres valeurs d’éléments d’alignement.
Si vous souhaitez vous déplacer au milieu de l'écran, vous pouvez mettre justification-content: center; avec align-items: center;
Remarque : assurez-vous que votre conteneur ou parent doit avoir display: grid ; propriété.
Alignement vertical de la grille CSS avec le chemin le plus court possible
Oui, il existe un court formulaire pour aligner les éléments au milieu de l’écran.
Vous pouvez utiliser des éléments de lieu : center ;
C'est une forme courte pour justifier-content : center; et align-items : center;
Si vous êtes nouveau dans les grilles CSS, vous devriez consulter un guide complet des astuces CSS. Leur guide est très utile.
Allez-y et lisez : Un guide complet des grilles CSS
Nous avons rédigé un article direct sur CSS justification-content: space-between . Vous allez l'adorer.
