# 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.