I have a div containing h1 and h2 tags. My objective is to center them both horizontally and vertically using flexbox. However, my current code aligns them diagonally like this:
--------------
| |
| h1h2 |
| |
--------------
What I actually want is:
--------------
| |
| h1 |
| h2 |
| |
--------------
Here is my HTML structure:
<div class="announcement">
<h1>h1</h1>
<h2>h2</h2>
</div>
This is my current CSS:
.announcement {
display: flex;
align-items: center;
justify-content: center;
}
I have attempted to insert a <br> tag after the <h1> tag, but it did not produce the desired result.