html - 需要帮助将元素垂直居中放置在列中的剩余空间中

Question

我有两列。第一列包含几个元素。我希望最后一个元素在剩余的空白空间中垂直居中。

例如，如果左栏高 4 英寸，包含 3 个元素，前两个元素占据顶部 2 英寸，那么最后一个元素将在底部两英寸处垂直居中。

为此，我第一次尝试使用 FlexBox，但惨遭失败。我可以将整个左列垂直居中(如果我将 align-items: center; 放在 .row 下)，但我无法通过放置 align-items: center; 来让它工作。在 .lastitem 下。

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.lastitem{
    align-items: center;
}

非常感谢任何帮助。

补充:对不起，我不确定如何分享相关代码。这是相关测试页面的链接:njfilmschool.com/homenew4.php 我正在努力做到这一点，因此“Laurel Image”在 Instagram 提要下方和页脚行上方垂直居中。但是因为页面是动态生成的，所以空白空间会改变大小。看起来 FlexBox 应该让我这样做，但我所做的对图像没有影响。

Answer 1

如果您准备好展示整个代码，我可以建议您使用 flexbox 解决方案。可能您在 .lastitem 上缺少 display: flex，因此 DOM 未呈现 align-items: center。

此刻，我有一个嵌套的CSS Grid解决方案如下:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr) 2fr; /* One inch - One Inch - Two Inch Inches are fractions here*/
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background: #6A67CE;
  padding: 15px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2; /* Start at Row1, end at Row2, Start at Col1. end at Col2 */
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.div3 {
  grid-area: 3 / 1 / 4 / 2;
  display: grid;
  /* Nested Grid */
  align-items: center;
}


/* Snippet styling */

.container > div {
  background: #5548B0;
  text-align: center;
  color: #fff;
  font-size: 36px;
  padding: 15px;
}

<div class="container">
  <div class="div1"> 1 </div>
  <div class="div2"> 2 </div>
  <div class="div3"> 3 </div>
</div>