如何将页脚中的三个div(图标和文本)与其他三个带有网格的图像(在主页眉中)对齐/居中?HTML/CSS

zxlwwiss  于 2022-12-20  发布在  其他
关注(0)|答案(2)|浏览(104)

我对编码比较陌生,需要网格元素方面的帮助。我正在重新创建一个店面服装网站以供参考。有人能帮我将主页脚中的三个div与主部分中的三个其他图像对齐/居中,或者与整个页面对齐吗?下面是我的主页眉:

<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>

这是我的主要页脚:

<section id="main-footer"> 
    <hr>
    
<div class="icon1">
        <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 class="icon2">
        <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 class="icon3"> 
        <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>

下面是他们的CSS:

.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;
        
    
        }
py49o6xq

py49o6xq1#

如果你想在2维对齐,最好使用css网格,而不是flexbox good resource for css grid
flexbox是很好的,如果你想垂直或水平对齐,如果你都需要看使用css网格。或者你可以使用边距和填充手动移动元素,但会使你的页面React不快。

fdx2calv

fdx2calv2#

根据你在评论中的陈述,我猜这就是你想要达到的结果。如果我误解了,请在评论中告诉我,我会根据你的需要编辑答案。

#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 class="icon1">
    <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 class="icon2">
    <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 class="icon3">
    <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>

相关问题