How can I center an image with display: grid

Question

I'm trying to center an image inside of the 'display: grid' but it's not working.

I've tried 'align-items' but I didn't work too.

Code:

<section style="padding-top: 30px;">
        <h4 style="text-transform:uppercase;  display: inline-block; font-weight: bold;">Os Convênios podem ser:</h4>

        <div style="display: grid; grid-template-columns: 120px repeat(1, 1fr); grid-gap:30px; padding-top: 30px;">
            
            <div style="background-color: lightgray; width: 100%; height: 100%;">
                <img src="icons/money_icon.png" style="margin-left: auto; margin-right: auto; display: block; width: 50px;">
            </div>
            <div>
                <p style="font-weight:bold;">1. Impositivos:</p>
                <p>text</p>
                <p style="font-weight:bold;">2. Autorizativos:</p>
                <p>text</p>
            </div>
        </div>
    </section>

Tip! Use style tags and classes instead of inline style tags. — tscpp, Jan 26 '21 at 18:26
Centering things in css: https://css-tricks.com/centering-css-complete-guide. I have used the guide quite a lot myself — tscpp, Jan 26 '21 at 18:27

score 0 · Answer 1 · answered Jan 26 '21 at 16:54

You could use flexbox in the div wrapping your img and use align-items: center to vertically center your image. Just add the following style

display:flex; align-items:center;

to this div

<div style="background-color: lightgray; width: 100%; height: 100%;">

score 0 · Accepted Answer · answered Jan 26 '21 at 17:02

If you set the div around the image to display: grid; and align-items: center;, it works.
(i added a .center class to the div arround your image)

.center {
  display: grid;
  align-items: center;
}

<section style="padding-top: 30px;">
        <h4 style="text-transform:uppercase;  display: inline-block; font-weight: bold;">Os Convênios podem ser:</h4>

        <div style="display: grid; grid-template-columns: 120px repeat(1, 1fr); grid-gap:30px; padding-top: 30px;">
            
            <div class="center" style="background-color: lightgray; width: 100%; height: 100%;">
                <img src="icons/money_icon.png" style="margin-left: auto; margin-right: auto; display: block; width: 50px;">
            </div>
            <div>
                <p style="font-weight:bold;">1. Impositivos:</p>
                <p>text</p>
                <p style="font-weight:bold;">2. Autorizativos:</p>
                <p>text</p>
            </div>
        </div>
    </section>

How can I center an image with display: grid

2 Answers2