Problème
Aligner le contenu d'un DIV en bas à l'aide de CSS.
Solution
Nous ne pouvons pas aligner le contenu d'un DIV vers le bas en utilisant uniquement le HTML. Nous devons utiliser les propriétés CSS pour aligner le contenu d'un DIV. Dans ce tutoriel, nous allons découvrir les propriétés utilisées à cet effet.
La propriété bottom est utilisée pour positionner verticalement un élément HTML. Nous pouvons donc l'utiliser avec la propriété position pour aligner le contenu d'un DIV en bas. Le fait que l'élément s'aligne en bas dépend également de la valeur de la propriété position. Pour aligner le contenu d'un DIV vers le bas, utilisez la propriété position : relative; à la classe conteneur et position : absolue; à l'élément du conteneur DIV que l'on aimerait aligner en bas.
Exemple : Aligner le contenu d'un DIV en bas avec la propriété bottom
Dans cet exemple, nous allons aligner le contenu d'un DIV vers le bas en utilisant la propriété CSS bottom.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
position: relative;
}
.child {
position: absolute;
bottom: 10px;
width: 100%;
background: #cccccc;
}
</style>
</head>
<body>
<div class="coontainer">
<div class="child">
<p>Le texte est aligné en bas du DIV.</p>
</div>
</div>
</body>
</html>
Voici le résultat du code ci-dessus.
Aligner le contenu d'un DIV en bas en utilisant de la propriété flexbox
Nous pouvons également aligner le contenu d'un DIV en bas en utilisant la propriété flex. Utilisez display : flex; pour l'élément et ajoutez align-items : flex-end; pour l'aligner en bas de l'élément DIV conteneur.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
h3 {
display: flex;
align-items: flex-end;
height: 450px;
align-text: center;
}
</style>
</head>
<body>
<div class="container">
<h3>Le texte est aligné en bas du DIV.</h3>
</div>
</body>
</html>
Et voici le résultat du code ci-dessus.
Conclusion
Dans ce tutoriel, nous avons appris à aligner le contenu d'un DIV en bas à l'aide de CSS. Cela peut être fait en utilisant la propriété flexbox ou la propriété bottom.