Inside my div, I have an h3 and a button. The div uses display:flex; with justify-content:center; and align-items:center;. However, the button ends up sticking to the right side of the h3. I attempted placing the button in its own div, but this caused a layout issue.
How can I position the button under the h3? Are there additional flex properties missing?
.title-block {
display: flex;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.title {
text-align: center;
width: 555px;
color: #fff;
font-size: 42px;
margin: 0;
}
.button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #fff;
font-size: 25px;
}<div class="title-block">
<h3 class="title">Text here</h3>
<button type="button" class="button">View more</button>
</div>