Comment centrer verticalement une division dans une autre ?



Avec un code HTML comme suit :



<div class="parent">

<div class="enfant"></div>

</div>




Ecrire le CSS comme suit :



.parent {
display: flex;
flex-direction: column;
justify-content: center;
}



La division enfant sera centrée verticalement dans la division parent.

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Scénario d'une gestion durable de l'humanité imaginée par un informaticien

Image
Je me suis aidé de bard.google.com pour établir ce scénario des plus probables. Année 2020 L'humanité est confrontée à une crise globale. La population mondiale a atteint 8,5 milliards d'habitants, et les ressources naturelles sont en train de s'épuiser. Les changements climatiques provoqués ont entraîné des catastrophes naturelles de plus en plus fréquentes et destructrices. Une nouvelle élite mondiale se prend pour le Messie annoncé et décide de prendre les choses en main. Elle lance un programme de gestion durable de l'humanité, visant à réduire la population mondiale à 500 millions d'habitants. Le premier objectif du programme est de collecter le code génétique de chaque personne. Cela est fait au moyen de tests antigéniques obligatoires, qui sont effectués à intervalles réguliers. Les données génétiques collectées sont utilisées pour identifier les individus les plus vulnérables, tels que les personnes âgées, les personnes malades, les personnes en surpoids. Le...
Lire la suite

Le vaccin n’est pas la bonne technologie

Image
Utiliser le mensonge pour résoudre un problème, aboutit forcément à une grande déception.  Par exemple certains avancent leur montre de 5 minutes pour être à l’heure : c’est un mensonge. Il vaut mieux travailler sur sa façon de s’organiser ou d’appréhender un rendez-vous.  D’autre (le monde entier) a décidé de changer l’heure par rapport au soleil pour faire des économies d’énergie ou pour s’amuser plus longtemps le soir. Résultat : tous les ans des perturbations physiques et psychologiques, une déconnexion de notre environnement et de notre horloge interne. Tous ces mensonges mis bout à bout créent une grande perturbation.  Les vaccins d’avant 2019 injectaient dans le corps un virus inactivé lui faisant croire qu’il se faisait attaquer. C’est comme si des parents faisaient un exercice à leur enfant : je te donne des coups pour que tu te prépares à une agression, plutôt que de lui faire faire du sport pour être en meilleure forme. Les vaccins à ARN messager transforment l...
Lire la suite

Comment éviter que deux divisions se chevauchent ?

Image
Quand on utilise l'attribut float:left; dans une division ( <div> ), il arrive souvent qu'on ne puisse pas dimensionner la hauteur du conteneur.  Cela produit ceci : La division Voir tous les événements chevauche la division précédente qui contient des divisions avec l'attribut float:left; Pour obtenir un écart entre les deux divisions, il est nécessaire d'ajouter dans la première division l'attribut overflow:auto; Exemple de code HTML : <div style="position:relative;...; overflow:auto; ">        <div style="float:left; ..."></div>        <div style="float:left; ..."></div>        <div style="float:left; ..."></div>        ... </div> <div style="position:relative;...">     Voir tous les événements </div>
Lire la suite