css - 如何在网格列中居中图像

Question

所以首先，在我告诉你我的目标是什么之前，我有一个问题我在网上找不到帮助。

将容器设置为已经在其他元素（如 main 和 section）中的 div 并为其提供子元素是否正确？

我的目标是创建 3 列和 2 行（它们将自动设置，因为我只有 6 个元素）并将图像放在顶部，借助 justify-items 和 align-items 属性将所有内容居中，添加 h3 标签和在该段/描述下方

我遇到的问题是当我添加 img 标签时 justify-items 和 align-items 停止工作，我必须将所有内容居中！

我什至尝试应用 text-align:center; 到 img 元素本身，它仍然没有工作！

这是代码（我把我在网上找到的随机图像作为示例）

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: black;
    align-items: center;
    justify-items: center;

}

img {
    width: 10%;
}

       <section class="page-rest">
           <div class="grid-container">
               <div class="feature one">
                   <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                   <h3>Feature</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature two">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature three">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature four">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>
            
               <div class="feature five">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature six">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>
           </div>
       </section>

我遇到的问题是

标签： css

Answer 1

添加.feature { display: flex; align-items: center; justify-items: center; flex-direction: column; }

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: black;
    align-items: center;
    justify-items: center;

}

    .feature {
            display: flex;
            align-items: center;
            justify-items: center;
            flex-direction: column;
    }

img {
    width: 10%;
}

       <section class="page-rest">
           <div class="grid-container">
               <div class="feature one">
                   <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                   <h3>Feature</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature two">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature three">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature four">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>
            
               <div class="feature five">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>

               <div class="feature six">
                    <img src="https://findicons.com/files/icons/2779/simple_icons/2048/github_2048_black.png" alt="">
                    <h3>Feature</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, error illum blanditiis esse perspiciatis dolorem!</p>
               </div>
           </div>
       </section>