I want exactly like this website: https://www.petzl.com/INT/en

I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.

I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.

If I dont use this line "place-content:center;" it places it to left with a lot of spaces.

My website link: beta.edgerope.com

Please find code below:

<style>

.image{
   
  height: 800px;
  width: 100%;
  display: grid;
  place-content:center;
  justify-content:middle;
  color: white;
  font-size:30px;
  background-color: #;
  background-position: center;
  background-size: cover;
}

.training{
    display:inline-block;
  padding-top: 50px;
  padding-right: 1500px;
  padding-bottom: 50px;
  padding-left: 1px;
  
}
  
 
.image>div {
  display: inline-block;
  width: 100px;
  
}

.image>div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
 z-index: 0;
 display: inline-block;
}

.image>div span {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-block;
}

.image>div span:hover img {
  opacity: 1;
  display: inline-block;
}


.div{
    dipslay
}
</style>

<div >
    
    <div >
     <span  onclick="window.location=''">Services</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> 
   
    </div>
    
    
    
  <div >
      <span  onclick="window.location='beta.edgerope.com/courses'">Training</span>
    
    <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
    
  <div >
     <span  onclick="window.location='beta.edgerope.com/shop'">Shop</span>
    <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>

:

CodePudding user response：

You can use CSS flex property something like this

.image {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}