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:

​​​​​​<div class="parent">
    <div class="child">
        This text is vertically aligned to bottom.    
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​

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

Answer 2

Modern solution

Flexbox was created for exactly these kind of problems:

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

<div id="container">
    <span>Text align to center bottom.</span>
</div>

Old school solution

If you don't want to mess with table displays, then you can create a <div> inside a relatively positioned parent container, place it to the bottom with absolute positioning, then make it 100% wide, so you can text-align it to the center:

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    position: relative;
}

#text {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

<div id="container">
    <span id="text">Text align to center bottom.</span>
</div>

Answer 3

Sometimes you can play with padding and margin top, add line-height, etc.

See fiddle.

Style and text forked from @aspirinemaga

.parent
{
    width:300px;
    line-height:30px;
    border:1px solid red;
    padding-top:20px;
}

Answer 4

Vertical align only works in some select cases. The easiest way to make it function is to set display: table in the parent element's CSS and display: table-cell; to the child element and then apply your vertical align attribute.

Answer 5

if your text doesn't spill over two rows then you can do line-height: ; in your CSS, the more line-height you give, the lower on the container it will hold.