Put text at bottom of div

Question

I have 4 DIV s right next to each other  and they re all centered in the middle of the screen  I have 2 words in each div  but I don t want them at the top  I want them to appear in the bottom right hand corner of the div  How can I do this

User · Accepted Answer

Wrap the text in a span or similar and use the following CSS   your-div       position  relative      your-div span       position  absolute      bottom  0      right  0

User · Answer

I think that s better to use flex boxes  compatibility  than the absolute position  Here s example from me in pure css    x000D   x000D   container  x000D    background-color green  x000D    height 500px  x000D     x000D      FLEX BOX    x000D    display  -ms-flexbox  x000D      display  -webkit-flex  x000D      display  flex  x000D      -webkit-flex-direction  column  x000D      -ms-flex-direction  column  x000D      flex-direction  column  x000D      -webkit-flex-wrap  nowrap  x000D      -ms-flex-wrap  nowrap  x000D      flex-wrap  nowrap  x000D      -webkit-justify-content  flex-start  x000D      -ms-flex-pack  start  x000D      justify-content  flex-start  x000D      -webkit-align-content  stretch  x000D      -ms-flex-line-pack  stretch  x000D      align-content  stretch  x000D      -webkit-align-items  flex-start  x000D      -ms-flex-align  start  x000D      align-items  flex-start  x000D    x000D   x000D   elem1  x000D    background-color red  x000D    padding 20px  x000D     x000D       FLEX BOX CHILD    x000D   -webkit-order  0  x000D      -ms-flex-order  0  x000D      order  0  x000D      -webkit-flex  0 1 auto  x000D      -ms-flex  0 1 auto  x000D      flex  0 1 auto  x000D      -webkit-align-self  flex-end  x000D      -ms-flex-item-align  end  x000D      align-self  flex-end  x000D    x000D    x000D   lt div class  container  gt  x000D   TOP OF CONTAINER  x000D   lt div class  elem1  gt  x000D    Nam pretium turpis et arcu  Sed a libero  Sed mollis  eros et ultrices tempus  mauris ipsum aliquam libero  non adipiscing dolor urna a orci  x000D   x000D  Mauris sollicitudin fermentum libero  Pellentesque libero tortor  tincidunt et  tincidunt eget  semper nec  quam  Quisque id mi  x000D   x000D  Donec venenatis vulputate lorem  Maecenas ullamcorper  dui et placerat feugiat  eros pede varius nisi  condimentum viverra felis nunc et lorem  Curabitur vestibulum aliquam leo  x000D   lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you only have one line of text and your div has a fixed height  you can do this   div       line-height   2 height - font-size       text-align  right      See fiddle

User · Answer

Thanks  Harry the following code works for me    your-div     vertical-align  bottom     display  table-cell

User · Answer

lt div id  container  gt       lt div gt  lt span gt Two Words lt  span gt  lt  div gt       lt div gt  lt span gt Two Words lt  span gt  lt  div gt       lt div gt  lt span gt Two Words lt  span gt  lt  div gt       lt div gt  lt span gt Two Words lt  span gt  lt  div gt   lt  div gt    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      Check working example at http   jsfiddle net 7YTYu 2

[html] Put text at bottom of div

Examples related to html

Examples related to css