How to align the content of a div to the bottom with HTML?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *