Sometimes, we want to align the content of a div to the bottom with HTML.
In this article, we’ll look at how to align the content of a div to the bottom with HTML.
How to align the content of a div to the bottom with HTML?
To align the content of a div to the bottom with HTML, we use flexbox.
For instance, we write
div.parent {
display: flex;
height: 100%;
}
span.child {
display: inline-block;
align-self: flex-end;
}
to make the parent div a flex container with display: flex;.
We have height: 100%; so align-self will be applied.
Then we use align-self: flex-end; on the child span to make it stay at the bottom of the flex container.
Conclusion
To align the content of a div to the bottom with HTML, we use flexbox.
