Comment aligner le contenu d'une div par le bas en CSS ?
Pour aligner le contenu d'une div par le bas en CSS, il faut partir d'une div contenant deux éléments
Le langage CSS fournit des propriétés permettant de modifier l'alignement du texte dans les éléments d'une page web. Il est par exemple possible d'aligner le contenu d'une div en bas tout en ayant un titre en haut de la div. Pour réaliser cela, il faut partir d'une div contenant deux éléments : le titre et le texte à aligner en bas, lui-même contenu dans une autre div.
Titre Ce contenu doit être aligné en bas
Afin d'aligner en bas le contenu, il va falloir jouer sur les propriétés de positionnement des deux div. La div maDiv doit avoir un positionnement relatif alors que pour positionner la div contenu, il faudra lui donner un positionnement absolu et fixer la propriété bottom à 0, ce qui indique au contenu de rester collé au bas de la div maDiv.
#maDiv
{
/* Ce conteneur doit avoir un positionnement relatif */
position: relative;
/* On peut indiquer la hauteur de notre choix */
height: 150px;
}
#contenu
{
/* Ce conteneur doit avoir un positionnement absolu */
position: absolute;
/* En fixant la distance avec le bas à 0, on force le contenu à être aligné vers le bas */
bottom: 0;
}
En utilisant cette solution, vous pouvez cependant rencontrer des problèmes d'interactions avec d'autres éléments (par exemple, lorsque que vous utilisez un menu déroulant qui apparaît sur la div. Pour aligner verticalement des éléments, la solution la plus simple consiste à utiliser des tables. Les cellules des tables possèdent dans le langage CSS la propriété vertical-align, qui détermine l'alignement vertical du contenu.