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

Question

我正在尝试添加 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>

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

更多信息:

• Flexbox vertical text alignment
• Equal height children of flex items