There are a couple of ways you can align text to the bottom of a div using CSS. In this post, I will show you a couple of ways to do it.
CSS for aligning text to the bottom
Bottom-aligned text using CSS flexbox
The first and easiest way is using flexbox. Only two lines of CSS can make it happen.
.container { display: flex; align-items: flex-end;}I have a CSS class of container for the div and that’s why I used the selector above. See my HTML markup below.
<div class="container"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>Example 2: Using CSS position
In this example, I will use the same HTML markup. And align the text to the bottom of the div.
Here is my CSS below.
.container { position: relative;}.container p { position: absolute; left: 30px; bottom: 30px;}I had 30px padding on the container div (all 4 directions). So in my CSS, the left & bottom value is 30 pixels. But you can adjust the value as you want.
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Make your hands dirty
Build HTML CSS projects
<table><tbody><tr><td><a href=“/about-page-template/”>About us template</a></td><td><a href=“https://shihabiiuc.github.io/aboutpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/team-page/”>Team page</a></td><td><a href=“https://shihabiiuc.github.io/team-members-section/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-template/”>Testimonial page</a></td><td><a href=“https://shihabiiuc.github.io/testimonialpage/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/testimonial-slider/”>Testimonial slider</a></td><td><a href=“https://shihabiiuc.github.io/testimonialslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/contact-page-html-css/”>Contact page</a></td><td><a href=“https://shihabiiuc.github.io/contact-page/contact-us.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-multiple-page-website-html/”>Multipage website</a></td><td><a href=“https://shihabiiuc.github.io/multipagehtml/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/portfolio-website-design-with-html-css/”>Portfolio website</a></td><td><a href=“https://shihabiiuc.github.io/portfolio/index.html” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/animated-portfolio-website/”>Animated portfolio</a></td><td><a href=“https://shihabiiuc.github.io/animated-portfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/computer-science-portfolio-website/”>Computer science portfolio</a></td><td><a href=“https://shihabiiuc.github.io/computerscienceportfolio/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-navigation-bar/”>Navigation bar (without JS)</a></td><td>N/A</td></tr><tr><td><a href=“/hamburger-menu/”>Create a hamburger menu</a></td><td><a href=“https://shihabiiuc.github.io/hamburger-menu/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/html-footer/”>Footer templates</a></td><td><a href=“https://shihabiiuc.github.io/footer-examples/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/hero-banner-image-using-html-css/”>Hero banner</a></td><td><a href=“https://shihabiiuc.github.io/herobanner/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/background-slider/”>Background slider</a></td><td><a href=“https://shihabiiuc.github.io/backgroundslider/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/how-to-create-3-column-layout-in-html-css/”>Three-column layout template</a></td><td><a href=“https://shihabiiuc.github.io/column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/two-column-layout-html-css/”>Two column layout</a></td><td><a href=“https://shihabiiuc.github.io/two-column-layout/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/thank-you-page-html-css/”>Thank you page</a></td><td><a href=“https://shihabiiuc.github.io/thank-you/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/resume-html-css/” data-type=“link” data-id=“http://localhost/shihabiiuc/resume-html-css/">Resume template</a></td><td><a href=“https://shihabiiuc.github.io/resume/” data-type=“link” data-id=“https://shihabiiuc.github.io/resume/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/coming-soon-template/” data-type=“link” data-id=“http://localhost/shihabiiuc/coming-soon-template/">Coming soon template</a></td><td><a href=“https://shihabiiuc.github.io/coming-soon/” data-type=“link” data-id=“https://shihabiiuc.github.io/coming-soon/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/create-landing-page-using-html-css-js/” data-type=“link” data-id=“http://localhost/shihabiiuc/create-landing-page-using-html-css-js/">Landing page template</a></td><td><a href=“https://shihabiiuc.github.io/landing-page/” data-type=“link” data-id=“https://shihabiiuc.github.io/landing-page/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr><tr><td><a href=“/roofing-website-template-for-download-responsive/” data-type=“link” data-id=“http://localhost/shihabiiuc/roofing-website-template-for-download-responsive/">Roofing website template</a></td><td><a href=“https://shihabiiuc.github.io/roofing-website/” data-type=“link” data-id=“https://shihabiiuc.github.io/roofing-website/” target=“_blank” rel=“noreferrer noopener”>Preview</a></td></tr></tbody></table>
Conclusion
Do you know any other ways to align text to the bottom of a container? Let me know.
In this post, I had a 300px min-height of the container div. I did this to create sufficient space to mess around.
To align text to the bottom, you can either use CSS flexbox or position.
