Comment aligner une étiquette sur le “FOND” d'un div dans le CSS?

Pourquoi vertical-align: bottom ne travaille pas seul

Depuis la hauteur de l'élément parent est plus grand que le calcul de la hauteur de l'étiquette, à l'Aide de vertical-align: bottom ne déplacer (inline) de l'élément de fond de la société mère.

Parce que dans une ligne de flux, vertical-align détermine la façon dont les éléments sont positionnés en fonction de leur parent de base; Et à l'aide de cette propriété sur l'étiquette de ne pas modifier la position de base de son parent.

Inline éléments de niveau (inline, inline-block) sont assis dans leur référence par défaut. Et si ils ont des hauteurs différentes, le plus grand élément permettra de déterminer où sont les autres qui doit être placé.

I. e. Dans une ligne de flux, le plus grand élément affectera/déplacer la ligne de base de la société mère:

La recherche d'une solution

Par conséquent, dans les cas où le parent a une explicite height, si nous pouvions avoir une ligne enfant qui a exactement la même hauteur que le parent (pleine hauteur d'enfant), il aurait une incidence sur la ligne de flux et de déplacer la ligne de base vers le bas:

Et afin de garder ces éléments (y compris les lettres ayant jambages) au sein du parent, nous devons aligner verticalement par vertical-align: bottom; de la déclaration de.

10.8 hauteur de la Ligne des calculs: 'vertical-align' propriété

baseline

Aligner la ligne de base de la boîte avec la ligne de base du parent de la boîte. Si la boîte n'a pas une base de référence, alignez le bas
marge bord avec le parent de référence.

bottom

Alignez le bas de l'alignement sous-arbre avec le bas de la boîte de ligne.

Mettre tous ensemble

Par conséquent, vous pouvez créer un élément de la hauteur (Personnellement, je préfère aller avec pseudo-éléments) à l'intérieur de la mère à l'alignement de l'étiquette en bas.

EXEMPLE ICI

#contain-word-div:after {
  content: "";
  display: inline-block;
  height: 100%;            /* Let it be as height as the parent */
  vertical-align: bottom;  /* Align the element at the bottom   */
}

#contain-word-lab {
  display: inline-block;
  vertical-align: bottom;  /* Align the element at the bottom   */
}

définir comme position:absolute;

#contain-word-lab {
  position:absolute;
  bottom:5px;
}

vertical-align a tendance à mieux travailler lorsque les conteneurs sont de table/table-comme des éléments (par exemple. table, tr, td, th) ou en ligne, des éléments de texte (par exemple span). Cependant, parce que table éléments de mise en page ne sont pas une bonne idée. Nous pouvons faire d'autres éléments fonctionnent comme eux à l'aide de la display:table; et display:table-cell; propriétés css.

Essayer d'appliquer le code css suivant:

#contain-word-div {
  height: 100px;
  border: 1px solid black; /* added just for visualising position */
  display:table;
}
#contain-word-lab {
  display:table-cell;
  vertical-align: bottom;
  padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}

DÉMO

Essayer de faire à la suite

VIOLON DÉMO

#contain-word-lab {
    vertical-align='bottom';/***Remove This***/
    bottom:2px;
    position:absolute;
}