为什么 CSS Grid 中的文本垂直对齐？答案

【问题标题】：Why is text vertically aligned in CSS Grid?为什么 CSS Grid 中的文本垂直对齐？
【发布时间】：2019-04-12 00:35:10
【问题描述】：

我正在尝试添加 2 张具有不同高度的图像和一些文本（文本的高度不同）。我正在使用 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>

【问题讨论】：

它并没有真正对齐，但这是网格计算的逻辑结果，因为您没有定义任何模板。检查元素以更好地查看
@TemaniAfif 我可以在顶部对齐吗？我的问题是我不知道有多少 div 过去了。它可以增加2个或更多。所以，我不知道如何定义模板而不知道 div 的数量
添加grid-template-rows:auto 1fr（在网格容器上）或使用align-items:flex-start（在弹性容器上）
@TemaniAfif 已经试过了，但是左边的文字比右边的高，这是因为图像的高度不同（1189px 和 1459px）。
试试.magazine-item {align-items : start}

标签： html css vertical-alignment css-grid

【解决方案1】：

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

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

缩小或删除它们。

将此添加到您的代码中：

p { margin-top: 0 }

您可能还想删除descender space below images。

将此添加到您的代码中：

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>

更多信息：

【讨论】：

谢谢，它上升了，但它与第二个文本（右边的文本）不在同一行。我该如何解决这个问题？
我在我的答案中添加了链接参考，可能会进一步帮助您。 @ValentinEmilCudelcu