How to position a link button under an image?-CodePudding

So I have flexbox items inside of a flex container, inside of these items there are image and button as shown in the following picture:

But for some reason when I try to do that, the button goes above the image as per the below screenshot:

My css code:

.navbar .ps_container{   /*flex container*/
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    width:100%;  
    height: auto;
    background-color: blue; 
    padding-bottom: 50px;
    padding-top: 50px;  
    } 

.ps_container>div{  /* flexbox items*/
    display: flex;
    flex:1 1 auto;
    justify-content: center;
    margin:20px;
    padding-inline: 40px;
    width:200px;
    height:200px;
    background-color: white;  
} 

.ps_container>div img{  /* image style*/
    max-height: 300px;
    max-width: 300px;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 auto;
}

.ps_container>div a{    /* button style*/
    background-color: #20d8da;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 160px;
    height: 50px;
    color: #fff;
    border-radius: 0;
    padding: 0 30px;
    font-size: 14px;
    line-height: 50px;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;  
}

<div class="ps_container">
   <div class="block">
            <img src="https://dummyimage.com/600x400/000/fff">
            <a href="#">view Games</a>
   </div>
   <div class="block">
       <img src="https://dummyimage.com/600x400/000/fff">
       <a href="#">view Games</a>
  </div>
  <div class="block">
       <img src="https://dummyimage.com/600x400/000/fff">
       <a href="#">view Games</a>
  </div>
</div>

I thought maybe it has to do with img not being display:block, but adding that didnt seem to work either.

CodePudding user response：

I guess you are searching for flex-direction:column; in your div.block.

Doc : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

After your block goes on each other because you are setting container size (200x200) smaller than img (300x300) inside it...

DEMO:

.navbar .ps_container{   /*flex container*/
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    width:100%;  
    height: auto;
    background-color: blue; 
    padding-bottom: 50px;
    padding-top: 50px; 
} 

.ps_container>div{  /* flexbox items*/
    display: flex;
    flex-direction:column; /***** ADDED *****/
    flex:1 1 auto;
    justify-content: center;
    margin:20px;
    padding-inline: 40px;
    width:200px;
    height:200px;
    background-color: white;  
} 

.ps_container>div img{  /* image style*/
    max-height: 300px;
    max-width: 300px;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 auto;
}

.ps_container>div a{    /* button style*/
    background-color: #20d8da;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 160px;
    height: 50px;
    color: #fff;
    border-radius: 0;
    padding: 0 30px;
    font-size: 14px;
    line-height: 50px;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;  
}

<div class="ps_container">
   <div class="block">
            <img src="https://dummyimage.com/600x400/000/fff">
            <a href="#">view Games</a>
   </div>
   <div class="block">
       <img src="https://dummyimage.com/600x400/000/fff">
       <a href="#">view Games</a>
  </div>
  <div class="block">
       <img src="https://dummyimage.com/600x400/000/fff">
       <a href="#">view Games</a>
  </div>
</div>

CodePudding user response：

You might wanna use flex-direction: column to achieve it.

.ps_container {
  /*flex container*/
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  background-color: blue;
  padding-bottom: 50px;
  padding-top: 50px;
}

.ps_container > div {
  /* flexbox items*/
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  background-color: white;
}

.ps_container > div img {
  /* image style*/
  max-height: 300px;
  max-width: 300px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 auto;
}

.ps_container > div a {
  /* button style*/
  background-color: #20d8da;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 50px;
  color: #fff;
  border-radius: 0;
  padding: 0 30px;
  font-size: 14px;
  line-height: 50px;
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
}

<div class="ps_container">
  <div class="block">
    <img src="https://dummyimage.com/600x400/000/fff" />
    <a href="#">view Games</a>
  </div>
  <div class="block">
    <img src="https://dummyimage.com/600x400/000/fff" />
    <a href="#">view Games</a>
  </div>
  <div class="block">
    <img src="https://dummyimage.com/600x400/000/fff" />
    <a href="#">view Games</a>
  </div>
</div>

EDIT

Updated the answer including the fix to the parent to wrap the boxes in a single row.

Changes I done:

Added flex-direction: column to the box .ps_container > div so that the button will come below the image.
Remove width:200px; from .ps_container>div.
Replaced display: flex with display: inline-flex in .ps_container>div.

By giving width in static, you will have to readjust the same when you are using the site in responsive mode, without that, the width and details will update according to the window width, and that's what I will prefer. Happy coding.