How to center images inside the grid columns

Question

So first of all, before I tell you what my goal is I have one question I couldn't find help for online.

Is it correct to set the container to a div that's already inside the other element like main and section and then give children elements to it?

My goal is to to create 3 columns and 2 rows(they will be set automatically because i only have 6 elements) And put image at the top, center everything by the help of justify-items and align-items properties, add h3 tag and below that paragraph/description

The issue I came across is that justify-items and align-items stops working when I add the img tag and I must center everything!

I even tried applying text-align:center; to the img element itself and it still didnt work!

Here's the code(i put the random image ive found online for an example)

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

The issue I came across is

score 1 · Answer 1 · answered Jul 17 '21 at 22:23

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

Thank you a lot, this is the best way i've found and making this a duplicate question didnt solve my issue at all because i had to center everything using grid/flexbox only, also is there any particular reason that adding those properties to grid container didnt help? — Nuclear, Jul 18 '21 at 07:37
align-items and justify-items properties you've added for .grid-container will be applicable to .feature but not to next level items. — Charan Kumar, Jul 18 '21 at 18:45

How to center images inside the grid columns

1 Answers1