CSS vertical-align: text-bottom;

Question

Hi there I\'m trying to position text to the bottom of the

. Neither vertical-align:text-bottom; or vertical-align:bottom;<

Answer 1

To use vertical-align properly, you should do it on table tag. But there is a way to make other html tags to behave as a table by assigning them a css of display:table to your parent, and display:table-cell on your child. Then vertical-align:bottom will work on that child.

HTML:

​​​​​​

    

        This text is vertically aligned to bottom.    
    
​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.parent {
    width: 300px;
    height: 50px;
    display:​ table;
    border: 1px solid red;
}
.child { 
    display: table-cell;
    vertical-align: bottom;
}​

Here is a live example: link demo