CSS vertical-align: text-bottom;

by

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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)