Question

我正在尝试添加2张具有不同高度和一些文本的图像（文本的高度不同）。我正在使用网格为具有图像的div创建相同的高度（不想使用高度，因为我不知道图像的高度）。

我不知道为什么，当我使用SourceObject时，文本在div的中间对齐。有想法吗我不知道为什么。

display:grid

* {
  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;
}

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>

更多信息：

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

1 个答案: