如何使用display: grid将图像居中?

Question

我试图将图像居中在'display: grid'内，但它不工作。

屏幕截图

我试过'align-items'，但我也不工作。

代码:

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

Answer 1

如果您将图像周围的div设置为display: grid;和align-items: center;，则可以工作。
(我在你的图片周围添加了一个。center类)

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

Answer 2

您可以在div中使用flexbox包装您的img，并使用align-items: center垂直居中您的图像。只需添加以下样式

display:flex; align-items:center;

到这个div

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