How to align/center three divs (icons and text) in footer with three other images (in main-header) w-CodePudding

I am relatively new to coding and need help with grid elements. I am re-creating a storefront clothing website for reference. Could someone please help me align/center three divs in my main-footer with three other images in my main section or with the page entirely? Here is my main-header:

<section id="main-headergrid">
        <img src="images/image1.jpg" alt="image1">
        <img src="images/image2" alt="image2">
        <img src="images/image3.png" alt="image3">
    </section>

Here is my main-footer:

<section id="main-footer"> 
    <hr>
    
<div >
        <img src="images/icon1.png" alt="icon1" width="150" height="125">
        <h1> icon1 </h1>
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
    </div>
    <div >
        <img src="images/icon2.png" alt="icon2" width="150" height="125">
        <h1> icon2 </h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
    </div>
    <div > 
        <img src="images/icon3.png" alt="icon3" width="150" height="125">
        <h1> icon3 </h1> 
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> 
    </div> 
</section>

Here is the CSS for them:

        
    .container > #main-headergrid { 
        display: flex; 
        flex-direction: row;
        align-items: center;
    
        }
    
    
        #main-footer {
            height: 250px; 
            background-color: var(--grey);
            align-items: center;
            display: flex;
            justify-content: space-between;
            padding: 0px 325px 0px 0px; 
    
        }    
    
        
    
        footer { 
            height: 350px; 
            background-color: #000;
            text-emphasis-color: #FFF;
        
    
        }

CodePudding user response：

if you want alignment in 2 dimensions its better to use css grid, and not flexbox good resource for css grid

flexbox is good if you want vertical or horizontal alignment if you need both look into using css grid. or you could use margins and padding to manually move elements but would make your page less responsive.

CodePudding user response：

according to what you've stated in comment I guess this is the result you want to achieve. If I misunderstood it then please tell me in comment I will edit the answer according to your need.

#main-headergrid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}

#main-footer {
  height: 250px;
  background-color: var(--grey);
  display: flex;
  justify-content: space-between;
  margin-top:20px;
  text-align:center;
}

footer {
  height: 350px;
  background-color: #000;
  text-emphasis-color: #fff;
}

<section id="main-headergrid">
  <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image1">
  <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image2">
  <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="image3">
</section>

<section id="main-footer">
  <hr>

  <div >
    <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon1" width="150" height="125">
    <h1> icon1 </h1>
    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>
  <div >
    <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon2" width="150" height="125">
    <h1> icon2 </h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>
  <div >
    <img src="https://i.stack.imgur.com/xa3We.jpg?s=256&g=1" alt="icon3" width="150" height="125">
    <h1> icon3 </h1>
    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>
</section>