时间戳

首页 > 解决方案 > CSS网格中的图像不会居中

css - CSS网格中的图像不会居中

问题描述

它应该做什么：1 fr 是产品的图像，1fr 是产品的描述（位于图像的右侧）。整个网格应该在中间居中，但它不是。它居中，但在它们之间留下了巨大的差距。

HTML：

<div class="grid">
    <img src="../images/s6.png" alt="photo of the item">
    <div class="text">
        <h1 class=>V.2</h1>
        <h4>$54.00</h4>
        <ul>
            <li>Biquíni truangular com detalhes franzidos a lilás</li>
            <li>Detalhes metálicos dourados</li>
            <li>Alças ajustáveis</li>
            <li>Cintura subida reversível</li>
            <li>Opçāo de colocar copa</li>
        </ul>
    </div>
</div>

CSS：

.grid img{
    width: 450px;
    height: 450px;
    border: solid 1px rgb(235, 235, 235);
    border-radius: 3%;
    padding: 6px;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-items: center;
}

标签： csscss-grid

解决方案

你的img和div宽度相等，保持它们之间的正确间隙。如果你想缩小这个差距，你div的内容需要被证明是合理的。

.text {
  justify-self: start;
}

以下是更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

推荐阅读