Align text to the bottom of a div

Question

I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties  But I can t get it done  Basically my HTML code is like this    x000D   x000D   lt div style  height 200px  float left  border 1px solid  ff0000  position relative   gt  x000D     lt span style  position absolute  bottom 0px   gt A Text lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The effect is that in FF I just get vertical line  the div in a collapsed way  and the text is written next to it  How can I prevent the div collapsing but having the width fitting to the text

User · Answer

You now can do this with Flexbox justify-content  flex-end now    x000D   x000D  div   x000D    display  flex  x000D    justify-content  flex-end  x000D    align-items  flex-end  x000D    width  150px  x000D    height  150px  x000D    border  solid 1px red  x000D    x000D     x000D   lt div gt  x000D    Something to align x000D   lt  div gt  x000D   x000D   x000D    Consult your Caniuse to see if Flexbox is right for you

User · Answer

Flex Solution  It is perfectly fine if you want to go with the display  table-cell solution  But instead of hacking it out  we have a better way to accomplish the same using display  flex   flex is something which has a decent support    x000D   x000D   wrap   x000D    height  200px  x000D    width  200px  x000D    border  1px solid  aaa  x000D    margin  10px  x000D    display  flex  x000D    x000D   x000D   wrap span   x000D    align-self  flex-end  x000D    x000D   lt div class  wrap  gt  x000D     lt span gt Align me to the bottom lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    In the above example  we first set the parent element to display  flex  and later  we use align-self to flex-end  This helps you push the item to the end of the flex parent     Old Solution  Valid if you are not willing to use flex   If you want to align the text to the bottom  you don t have to write so many properties for that  using display  table-cell  with vertical-align  bottom  is enough   x000D   x000D  div   x000D    display  table-cell  x000D    vertical-align  bottom  x000D    border  1px solid  f00  x000D    height  100px  x000D    width  100px  x000D    x000D   lt div gt Hello lt  div gt  x000D   x000D   x000D     Or JSFiddle

[css] Align text to the bottom of a div

Examples related to css

Examples related to html

Examples related to text

Examples related to vertical-alignment