LAST UPDATED: AUGUST 5, 2021
How to Align Content of a DIV to the Bottom Using CSS
Answer: Using CSS bottom property
We cannot align the content of a DIV to the bottom using HTML only. We need to used CSS properties to align the content of div. In this tutorial, we will be learning about the properties used to do so.
The bottom property is used to vertically position the positioned element. So we can use it with position property to align the content of div to the bottom. The effect of the bottom also depends on the value of position property. To align the div content to the bottom, use position: relative to the container class and position: absolute to the div element.
Example: Align the content to the bottom of div
In this example, we are going to align the content of div to the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
position: relative;
}
.child {
position: absolute;
bottom: 10px;
width: 100%;
background: #cccccc;
}
</style>
</head>
<body>
<div class="coontainer">
<div class="child">
<p> Align the text to bottom </p>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Using flexbox property
We can also align the content of div to bottom using flex property. Use the display: flex to the element and add align-items: flex-end to align it to the end.
Conclusion
In this tutorial, we have learned to align the contents of div to the bottom using CSS. It can be done using flexbox property or bottom property.
