How to Align Text to the Bottom of a div using CSS?

In CSS, there are several ways to align text to the bottom of a div. However, nowadays, the simplest approach is to utilize the flexbox layout module.

To align text to the bottom of the div with the flexbox module, you have to first make the div a flex container by applying display: flex; property on it. After that, you can use the align-items property to vertically align the text inside of the div.

For example, the align-items: center; will vertically align the text to the center of the div. Similarly, the align-items: flex-end; will align the text to the bottom of the div.

Let’s take an example and try to understand it.

Suppose, we have a div element with some text and we want to align the text to its bottom.

<div class="textAtBottom">
    This text will be aligned to the bottom
</div>

Now, to align the text to the bottom of the div, make the div a flex container and set the align-items property to flex-end:

.textAtBottom {
    display: flex;     /* Create the flex container */
    align-items: flex-end;  /* Align text to the bottom */
    height: 200px;
    border: 2px solid crimson;
}

After running the above code, you will get the following output:

If you also want to align the text horizontally, you can use the justify-content property of the flexbox module.

The justify-content property aligns the flex items horizontally inside the flex container.

For eg., if you set the justify-content property to center, all the flex items will be centered horizontally inside the flex container.

.textAtBottom {
    display: flex;     /* Create the flex container */
    align-items: flex-end;  /* Align text to the bottom */
    justify-content: center;  /* Center text horizontally */
    height: 200px;
    border: 2px solid crimson;
}

Below is the outcome of the above CSS code:

As you can see from the above output, the text is first aligned to the bottom of the div and then centered horizontally because we set the justify-content property to center.

Method 2: Use the vertical-align Property to Align the Text to the Bottom

You can also take the help of the vertical-align property to align text to the bottom of a div. However, this approach is very old and we do not recommend it in modern applications.

In this method, you have to make the div like a table cell by setting the display property to table-cell. After that, you can use the vertical-align property to align the text vertically inside the div element.

Let’s take the same example that we discussed above and try to align the text to the bottom using the vertical-align property:

.textAtBottom {
    display: table-cell;     /* Make the div a table cell */
    vertical-align: bottom;  /* Align text to the bottom */
    height: 200px;
    border: 2px solid crimson;
}

Here is the outcome of the above code:

Conclusion

In this article, we learned how we can align the text to the bottom of a div with CSS.

The modern way of aligning the text to the bottom is to use the flexbox layout module. You can directly set the align-items property to flex-end to align the text to the bottom.

You can also use the display: table-cell; in combination with the vertical-align property to align the text to bottom. However, this approach is very old and you should use the flexbox module instead.

Thanks for reading.