How do I horizontally align images? (CSS and HTML)-CodePudding

I am seeking to make a drivers' page. In the desktop view, I would like my images to be next to each other horizontally. Right now, they are vertically aligned. I have tried changing the display attribute, but it didn't turn out great. The closed thing I have done using the grid display. I am still fairly new to this. So any help rendered will be appreciated. Thanks! Here is what my code looks like;

Html Code:

<div >
  <div >



    <!--Drivers from Spain-->
    <h2><a id="spain" href="#spain">Spain</a></h2>
    <div >
      <img src="Drivers/EFREN LLARENA (Spain) 2.jpg" alt="Efren Llarena" width="500">
      <div >
        <h2><span>Efren Llarena</span></h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
      </div>
    </div>

    <div >
      <img src="Drivers/Sara Fernandez (Spain).jpg" alt="Sara Fernandez" width="500" height="400">
      <div >
        <h2><span>Sara Fernandez</span></h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
      </div>
    </div>
 </div>

Sara Fernandez (Spain) Efren-Llarena (Spain)

CSS Code;

.driver-row h2 a{
    color: #fff;
    text-decoration: none;
    font-size: 70px;
    font-weight: 300;
}
.drivers-container{
    margin: 30px;
}
.driver-row{
    width: 100%;
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
}
.image2{
    background: #000000;
    position: relative;
    flex: 1;
    max-width: 460px;
    height: 300px;
    margin: 20px;
    overflow: hidden;
}
.image2 img{
    opacity: 0.8;
    position: relative;
    vertical-align: top;
    transition: 0.6s;
    transition-property: opacity;
}
.image2:hover img{
opacity: 1;
}
.image2 .details{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
}
.image2 .details h2{
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 70px;
    transition: 0.4s;
    transition-property: transform;
}
.image2 .details h2 span{
font-weight: 900;
}
.image2:hover .details h2{
    transform: translateY(-30px);
}
.image2 .details p{
    margin: 30px 30px 0 30px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: 0.6s;
    transition-property: opacity,transform;
}
.image2:hover .details p{
    opacity: 1;
    transform: translateY(-40px);
}

CodePudding user response：

i recommend you to extract heading and extra stuff from the driver-container

<div >
    <h2>
        <a id="spain" href="#spain">Spain</a>
    </h2>
    <div >
        <div >
            <img src="Drivers/EFREN LLARENA (Spain) 2.jpg" alt="Efren Llarena" width="500">
             <div >
                 <h2><span>Efren Llarena</span></h2>
                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
             </div>
        </div>

        <div >
             <img src="Drivers/Sara Fernandez (Spain).jpg" alt="Sara Fernandez" width="500" height="400">
              <div >
                  <h2><span>Sara Fernandez</span></h2>
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
             </div>
        </div>
   </div>

now for your css I'll only write down necessary rules, add your own designs later

.driver-row{
     display: flex;
     flex-wrap: wrap;
     width: 100%;
}
.image2{
     width: 50%;
     box-sizing: border-box;
     padding: 20px;
     position: relative ;
}
.image2 img{
     width:100%;
     height: 400px;
     object-fit: cover;
}
.image2. details{
     position: absolute ;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%; 
}

it is using flexbox only.

CodePudding user response：

Just add css as below mentioned. You are using display: grid and applying flexbox properties. So just remove display: grid and replace it to display:flex;

.driver-row{
    width: 100%;
    /* display: grid; */ /*REMOVE THIS*/
    display: flex; /*ADD THIS*/
    justify-content: center;
    flex-wrap: wrap;
}