web-dev-qa-db-fra.com

Mettre le texte en bas de div

J'ai 4 DIV juste à côté, et elles sont toutes centrées au milieu de l'écran. J'ai 2 mots dans chaque div, mais je ne les veux pas en haut, je veux qu'ils apparaissent dans le coin inférieur droit de la div. Comment puis-je faire ceci?

csshtmlcss3
62
anon271334

Enveloppez le texte dans un span ou similaire et utilisez le code CSS suivant ...

.your-div {
    position: relative;
}

.your-div span {
   position: absolute;
   bottom: 0;
   right: 0;
}
120
alex
<div id="container">
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
</div>

#container{
    width:450px;
    height:200px;
    margin:0px auto;
    border:1px solid red;
}

#container div{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    float:left;
    margin-right:5px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}

Consultez l'exemple de travail sur http://jsfiddle.net/7YTYu/2/

7
Hussein

Si vous n'avez qu'une ligne de texte et que votre div a une hauteur fixe, vous pouvez le faire:

div {
    line-height: (2*height - font-size);
    text-align: right;
}

Voir violon .

6
melhosseiny

Merci @ Harry, le code suivant fonctionne pour moi:

.your-div{
   vertical-align: bottom;
   display: table-cell;
}
5
meck373

Je pense que c'est mieux d'utiliser des boîtes flexibles ( compatibilité ) que la position absolue. Voici un exemple de moi en pure css.

.container{
  background-color:green;
  height:500px;
  
  /*FLEX BOX */
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.elem1{
  background-color:red;
  padding:20px;
  
   /*FLEX BOX CHILD */
 -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
 
}
<div class="container">
 TOP OF CONTAINER 
<div class="elem1">
  Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.

Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.

Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>

</div>
3
Skylin R