CSS

Align text to bottom of div using CSS Example

Here is a neat trick to align the text or the content of a div to the bottom portion of the div using CSS.

Example to Align text to bottom of div using CSS

For the sake of example, let us assume that we have a div with ID “my_div”. This div contains another div with ID “my_div_content”. This div actually contains our text that we want to align to bottom of “my_div”. So let’s see how this can be achieved.

Example: Align Text to bottom of Div using CSS

<style type="text/css">
#my_div { position: relative; }
#my_div_content { position: absolute; bottom: 0; left: 0; }
</style>

<div id="my_div">

<div id="my_div_content">
<h1>Some title</h1>
Content goes in here.
</div>
</div>
 That’s it!

Do you know of any other ways to align text to bottom of div using CSS? Feel free to suggest by commenting below.

Share your thoughts, comment below now!

*

*