Comment aligner le bouton au bas de la div en utilisant CSS?
Pour créer un aspect clair et symétrique des éléments, les alignements sont utilisés dans les pages Web ou les sites Web. CSS vous permet d'aligner des éléments HTML à différentes positions, comme le centre, la gauche, la droite et le bas. Dans ce manuel, nous avons utilisé deux méthodes pour aligner le bouton en bas de la div, c'est-à-dire:
-
- Méthode 1: Alignez le bouton au bas de la div en utilisant «afficher" Propriété
- Méthode 2: Alignez le bouton au bas de la div en utilisant «position" Propriété
Alors, commençons!
Méthode 1: Alignez le bouton en bas de la propriété «Afficher»
Dans CSS, pour aligner le bouton au bas de la div, la valeur du «afficher«La propriété est définie comme«fléchir". Cela dépend de la taille de la fenêtre et définit le contenu ou les éléments en conséquence. La valeur flexible crée également un espace égal entre les éléments pour s'assurer qu'ils sont disposés symétriquement.
Syntaxe
Affichage: flexion
Dans la syntaxe donnée ci-dessus, "fléchir«Sera spécifié comme la valeur du«afficher" propriété.
Alors, vérifions l'exemple pour aligner le bouton en bas à l'aide de flex.
Exemple 1: Aligner le bouton en bas et au centre de la div
Dans HTML, nous ajouterons une div principale et attribuerons le nom de classe comme «div»Et ajoutez son cap et un sous-div. Nous attribuerons le nom de classe comme «btn«Pour subdiquer et ajouter un bouton en utilisant la balise.
Html
Aligner le bouton en bas
Après l'achèvement du code HTML, passez au CSS.
Ici, nous utiliserons ".div«Pour accéder au conteneur principal que nous avons créé en HTML. Ensuite, nous définirons la hauteur de la div comme «150px»Et définissez la valeur de position comme«relatif". Pour coiffer la div, définir la bordure de la div comme «2px","solide", et "RVB (26, 53, 1)»Et la couleur d'arrière-plan de la div comme«RVB (162, 173, 121)".
CSS
.div
hauteur: 150px;
Position: relative;
Border: 2px RVB solide (26, 53, 1);
Color en arrière-plan: RVB (162, 173, 121);
Note: Il est nécessaire de définir la position et la hauteur du div pour régler le bouton en bas du div.
Ensuite, utilisez ".btn”Pour accéder au sous-div créé dans la section HTML. Définissez la valeur de la propriété d'affichage comme «fléchir"Et la hauteur comme"130px". Après cela, définissez la valeur de justifier et d'alignement d'alignement comme «centre«Pour régler le bouton en bas de la div:
.btn
Affichage: flex;
hauteur: 130px;
Justification-contenu: centre;
Align-Items: Centre;
La sortie du code décrit ci-dessus est donnée ci-dessous. Ici, vous pouvez voir ce bouton en alignant au bas de la div:
Exemple 2: Alignez le bouton en bas à gauche de Div
Pour aligner le bouton du côté inférieur gauche de la div, il vous suffit de modifier la valeur de la propriété de justification du centre à "gauche»:
justifier-contenu: à gauche;
Sortir
Exemple 3: Aligner le bouton en bas à droite de Div
Pour aligner le bouton en bas à droite du div, vous devez remplacer la valeur de la propriété de justification du centre au centre à «droite»:
justifier-contenu: à droite;
Sortir
Maintenant, passez à la méthode suivante pour aligner le bouton en bas du div.
Méthode 2: Alignez le bouton au bas de la propriété «position»
Le "position»La propriété est utilisée pour spécifier un type de position différent utilisé pour divers éléments HTML. La syntaxe de la propriété de position est donnée ci-dessous.
Syntaxe
Position: statique | Absolu | Fixe | Relatif
Dans la syntaxe ci-dessus, les quatre propriétés suivantes de la propriété de position sont mentionnées:
-
- statique: Il est utilisé pour définir la position en fonction du flux de page normal. Cette méthode de positionnement est définie par défaut.
- relatif: Il est utilisé pour définir la position d'un élément par rapport à l'autre élément.
- absolu: Il est utilisé pour ajuster la position d'un sous-élément basé sur la position de son élément principal.
- fixé: Il spécifie la position de l'élément en fonction de sa fenêtre.
Continuons l'exemple pour ajuster le bouton en bas du div.
Exemple 1: Aligner le bouton en bas à droite de Div
Nous continuerons l'exemple précédent du code HTML et attribuerons des propriétés à Div en conséquence:
.div
Position: relative;
Border: 2px RVB solide (12, 38, 46);
Color en arrière-plan: RVB (55, 104, 119);
hauteur: 150px;
Après cela, nous définirons la propriété de position pour définir la position du bouton ".btn”Classe qui accède au bouton que nous avons créé dans HTML. Ensuite, définissez la valeur de la propriété de position comme «absolu»Et définissez la marge inférieure et droite comme«5px" et "0px»:
.btn
Position: absolue;
En bas: 5px;
Droite: 0px;
Note: Pour la div principale, nous avons défini la valeur de la propriété de position comme «relatif"Et sub div comme"absolu". Pour ce faire, la div principale donne le contrôle pour ajuster la position du sous-div. Si vous avez défini la valeur de la propriété de position pour le parent et l'enfant Div comme relatif, il ne place pas de bouton en bas du div.
Comme vous pouvez le voir dans la sortie suivante, le bouton est réglé dans le coin inférieur droit du div:
Exemple 2: Alignez le bouton en bas à gauche de Div
Pour régler le bouton en bas à gauche de la div, nous remplacerons le «droite«Propriété avec«gauche»Et définissez sa valeur comme suit:
gauche: 0px;
Sortir
C'est ça! Nous avons expliqué la méthode d'alignement du bouton au bas de la div à l'aide de CSS.
Note: Nous pouvons également régler le bouton au centre en donnant les valeurs au «gauche«Propriété manuellement, mais nous ne le recommandons pas car cela peut affecter la réactivité de la page.
Conclusion
Le "afficher" et "position«La propriété de CSS est utilisée pour ajuster le bouton en bas du div. À l'aide de la propriété de position, définissez la valeur de la position sur l'élément parent comme «relatif»Et élément enfant comme«absolu», Et pour la propriété d'affichage, définissez-le sur la valeur comme«fléchir". Dans cet article, nous avons expliqué la méthode pour aligner le bouton en bas de la div et en avons fourni différents exemples.