Comment puis-je aligner verticalement les éléments dans un div

En écrivant des documents HTML, nous ajoutons souvent des éléments comme des images, des paragraphes et des icônes. Parfois, il devient difficile d'aligner correctement les éléments. Une balise Div dans HTML est utilisée comme conteneur dans un document HTML. En écrivant un programme HTML, nous insérons principalement des images, du texte et des icônes dans une balise div. Il existe différentes méthodes qui aident à aligner les éléments div, verticalement ou horizontalement.

Dans cet article, nous discuterons de certaines des moyens les plus simples d'aligner les éléments verticalement dans une div utilisant HTML et CSS.

À travers la propriété line-hauteur

L'une des façons les plus simples d'aligner les éléments div verticalement est d'ajouter une propriété de hauteur de ligne dans l'élément de style CSS. S'il y a des éléments dans l'attribut DIV ID, ils peuvent être alignés après l'ajout dans l'élément de style CSS:

Dans l'élément de style, utilisez le sélecteur d'ID CSS (#ID). Ajoutez la propriété Line-Height dedans et définissez la hauteur en pixels (PX):

L'ajout de la propriété de hauteur de ligne et la hauteur de définition ajuste les éléments du conteneur div de manière à ce qu'il crée la distance entre les lignes verticalement en fonction de la valeur définie par l'utilisateur. Par exemple, si la valeur de hauteur de ligne dans le code était de 30px plutôt que 15px, la distance entre les éléments div aurait été plus grande. Ce qui suit sera la sortie de ce code avec une distance de hauteur de ligne de 15px:

Les éléments ont été alignés verticalement en utilisant la propriété CSS de hauteur de ligne.

À travers la propriété de rembourrage

Pour aligner les éléments verticalement dans une classe div, il existe une autre méthode facile. Les éléments peuvent être alignés verticalement facilement en ajoutant une propriété de rembourrage:

Dans l'élément de style CSS, ajoutez simplement la propriété de rembourrage avec une valeur en pixels et ajoutez le poids de la bordure:

#demo img
rembourrage: 5px 0;
Border: 2px solide # 5C34EB;

Il créera un rembourrage autour de chaque élément de la div et affichera la sortie suivante:

Dans l'élément div ci-dessus, tout ce que nous avons fait est d'ajouter une propriété de rembourrage Dans le sélecteur d'identification mentionné dans l'élément de style CSS.

Ce sont les deux méthodes faciles pour aligner les éléments dans une div verticalement.

Conclusion

Pour aligner l'élément DIV verticalement, il existe de nombreuses méthodes simples, comme l'ajout d'une propriété linéaire-hauteur dans l'élément de style CSS à l'aide d'un sélecteur d'ID faisant référence à l'attribut DIV ID ou ajoutant une propriété de rembourrage dans le sélecteur d'ID dans l'élément de style CSS. Cet article expliquait bien comment aligner les éléments divs verticalement.