如何使div中的文本位于div的底部？

Question

I have been trying to place text over a background image for a header element (id="blogheader") on my page but I can't seem to get the text to sit at the bottom of the div. I have tried a couple things including 'vertical-align: bottom' and vertical-align: text-bottom'.

I figure there is something I'm just missing or an easier way to get the result I want but I'm still learning how to code properly! :)

Here's the HTML:

<main id="blogpage">
            <h2 id="blogheader">The Blog!</h2>

            <div id="popblogs">Most Popular Blogs</div>
            <div id="recentblogs">Most Recent Blogs</div>

            <section>
                <article id="art1">
                    <h3>Topic One</h3>
                </article>
            </section>
</main>

And the CSS:

#blogheader         {clear: both;
                    text-align: center;
                    background-image: url(Photos/image.jpg);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    margin: 0;
                    font-size: 5em;
                    color: #00c3d5;
                    height: 400px;
                    vertical-align: text-bottom;}

Also, any code criticism would be greatly appreciated since I am in a course currently learning all this stuff and it doesn't hurt to have some expert advice!

Answer 1

To put the text at the bottom of the element, you can assign display: flex; to #blogheader and then justify-content: center; to center the child text horizontally, and align-items: flex-end; to push the child text to the flex-end/bottom.

 #blogheader { clear: both; text-align: center; background-image: url(Photos/image.jpg); background-repeat: no-repeat; background-size: 100%; margin: 0; font-size: 5em; color: #00c3d5; height: 400px; vertical-align: text-bottom; display: flex; justify-content: center; align-items: flex-end; } 

 <main id="blogpage"> <h2 id="blogheader">The Blog!</h2> <div id="popblogs">Most Popular Blogs</div> <div id="recentblogs">Most Recent Blogs</div> <section> <article id="art1"> <h3>Topic One</h3> </article> </section> </main> 

Answer 2

You may use display:table-cell or flex:

• flex

 #blogheader { clear: both; text-align: center; background-image: url(Photos/image.jpg); background-repeat: no-repeat; background-size: 100%; margin: 0; font-size: 5em; color: #00c3d5; /* send content down */ height: 400px;display:flex; flex-flow:column; justify-content:flex-end; } 

 <main id="blogpage"> <h2 id="blogheader">The Blog!</h2> <div id="popblogs">Most Popular Blogs</div> <div id="recentblogs">Most Recent Blogs</div> <section> <article id="art1"> <h3>Topic One</h3> </article> </section> </main> 

• table-cell

 #blogheader { clear: both; text-align: center; background-image: url(Photos/image.jpg); background-repeat: no-repeat; background-size: 100%; margin: 0; font-size: 5em; color: #00c3d5; height: 400px; /* send content down */ display:table-cell; vertical-align:bottom; } 

 <main id="blogpage"> <h2 id="blogheader">The Blog!</h2> <div id="popblogs">Most Popular Blogs</div> <div id="recentblogs">Most Recent Blogs</div> <section> <article id="art1"> <h3>Topic One</h3> </article> </section> </main>