How do i put button under h3 with display flex

Question

I have div with h3 and button inside of it, and my div has display:flex; with justify-content:center; align-items:center; and when i insert these propeties, my button sticks on the right side of the h3 i tried creating div and putting button in it, but that just breakes the view

So question is, how do i put button under h3? Do i have missing flex properties?

.tittle-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/background.png) 0% no-repeat;
  padding: 0;
  min-height: 495px;
}

.tittle {
  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="tittle-block">
  <h3 class="tittle">Text here</h3>
  <button type="button" class="button">View more</button>
</div>

score 1 · Accepted Answer · answered May 24 '21 at 10:08

All you need to do is add flex-direction: column.

But, first, you've a syntax error:

<div class="tittle-block> , you need to close the class tag, like this <div class="tittle-block">

.tittle-block{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: url(../img/background.png) 0% no-repeat;
   padding: 0;
   min-height: 495px;
   }

 .tittle{
   text-align: center;
   width: 555px;
   color: #000;
   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: #000;
   font-size: 25px;
   }

<div class="tittle-block">
   <h3 class="tittle">Text here</h3>
   <button type="button" class="button">View more</button>
</div>

ps: I edited the font to be #000 so that you can see it, change it back to your original #fff.

How do i put button under h3 with display flex

1 Answers1