web-dev-qa-db-fra.com

Aligner le texte au bas d'une div

J'ai essayé d'aligner mon texte au bas d'une div à partir d'autres publications et réponses dans stackoverflow. J'ai appris à gérer cela avec différentes propriétés CSS. Mais je ne peux pas le faire. En gros, mon code html ressemble à ceci:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
   <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

L'effet est que dans FF je reçois juste une ligne verticale (la div de manière réduite) et le texte est écrit à côté. Comment puis-je empêcher le div de s’effondrer mais que la largeur s’adapte au texte?

csshtmltextvertical-alignment
48
parascus

Solution Flex

C’est parfaitement bien si vous voulez utiliser la solution _display: table-cell_. Mais au lieu de le pirater, nous avons un meilleur moyen de faire la même chose en utilisant _display: flex;_. flex est quelque chose qui a un support décent .

_.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}_
_<div class="wrap">
  <span>Align me to the bottom</span>
</div>_

Dans l'exemple ci-dessus, nous définissons d'abord l'élément parent à _display: flex;_ et plus tard, nous utilisons align-self à _flex-end_. Cela vous aide à pousser l'élément à la fin du parent flex.

Ancienne solution (Valable si vous ne souhaitez pas utiliser flex)

Si vous souhaitez aligner le texte vers le bas, vous n'avez pas à écrire autant de propriétés pour cela, utiliser _display: table-cell;_ avec _vertical-align: bottom;_ suffit

_div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}_
_<div>Hello</div>_

(ou JSFiddle)

92
Mr. Alien

Vous pouvez maintenant le faire avec Flexbox justify-content: flex-end maintenant:

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}
  
<div>
  Something to align
</div>

Consultez votre Caniuse pour voir si Flexbox vous convient.

37
Zequez