为什么在CSS Grid中文本垂直对齐？

Question

为什么在CSS Grid中文本垂直对齐？

3

我正在尝试添加两个高度不同的图片和一些文本（文本高度也不同）。我使用Grid来创建具有相同高度的带有图像的div（不想使用高度，因为我不知道图像的高度）。

我不知道为什么当我使用display:grid时，文本会在div的中间对齐。有什么想法吗？我找不出原因。

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

- Valentin Emil Cudelcu

这并不是真正对齐的，但这是网格计算的逻辑结果，因为您没有定义任何模板。检查元素以更好地查看。 - Temani Afif

@TemaniAfif，我能把它对齐到顶部吗？我的问题是我不知道有多少个div已经过去了。可能是2个或更多。因此，我不知道如何在不知道div数量的情况下定义模板。 - Valentin Emil Cudelcu

在网格容器上添加 grid-template-rows:auto 1fr，或者在弹性容器上使用 align-items:flex-start。 - Temani Afif

@TemaniAfif 已经尝试过了，但是左侧文本比右侧文本上移，这是因为图像的高度不同（1189px 和 1459px）。 - Valentin Emil Cudelcu

尝试使用.magazine-item {align-items: start}。 - RadekF

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

p元素默认具有顶部和底部边距。

这些边距使您的文本在其容器中居中显示。

请将它们缩小或删除。

将以下代码添加到您的程序中：

p { margin-top: 0 }

你可能还想移除图像下面的下降空间。

将以下代码添加到您的代码中：

img { vertical-align: bottom; }

/* new */
p   { margin-top: 0; }
img { vertical-align: bottom; }


* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

更多信息：