沿不同容器的同一行垂直对齐文本

Question

我有一个容器，里面有另外两段文字——一个标题和一个描述，例如：

.item {
  box-sizing: border-box;
  width: 33%;
  text-align: center;
  padding: 20px;
  border: 1px solid #CCC;
  min-height: 200px;
  margin: 20px;
}

.item-title {
  font-size: 28px;
  margin-bottom: 15px;
}

.item-description {
  font-size: 12px;
}

<div class="item">
  <div class="item-title">Title</div>
  <div class="item-description">Some descriptive text</div>
</div>

<div class="item">
  <div class="item-title">A Much Longer Title</div>
  <div class="item-description">Some other descriptive text</div>
</div>

下面是想要的效果图：

我希望标题垂直居中在同一点（蓝线），无论它包含多少行。描述应始终位于下方，与标题的距离相同，顶部对齐（红线）。所以蓝线不动，红线可以。

到目前为止我已经尝试过：

• 对标题应用负 Y 变换。这样做的原因是它向上移动了标题，但描述文本没有跟随它。

• 边距：尝试设置百分比垂直边距，但当然这是相对于父元素的宽度而不是元素的高度，它没有达到预期的效果。

• Flexbox：与边距相同的结果。

• 位置：绝对在标题上。可以垂直对齐标题，但很难对齐描述。

经过一段时间的试验和大量阅读后，似乎不可能，但如果有人设法解决这个问题，我很想知道如何解决。

Answer 1

我同意你的看法。我认为仅靠 CSS 是不可能的。

您的要求：

我希望标题垂直居中在同一点（蓝线），无论它包含多少行。描述应始终位于下方，与标题的距离相同，顶部对齐（红线）。所以蓝线不动，红线可以。

以下解决方案满足要求 #1（蓝线）。标题沿同一水平线居中。

• 将顶级父级 (.item) 设为弹性容器。

• 给第一个孩子 (.item-title) 一定比例的容器空间。在下面的示例中，我使用了flex-grow: 3。

• 还给第二个孩子 (.item-description) 容器空间的设定比例。我用flex-grow: 1。

• 现在两个容器的垂直居中可以统一，因为它们占用相同比例的可用空间。

• 但是，描述也将与标题元素成比例的距离，并且不能保持锚定在同一水平轴（红线）上。

.item {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  width: 33%;
  text-align: center;
  padding: 20px;
  border: 1px solid #CCC;
  min-height: 200px;
  margin: 20px;
  box-sizing: border-box;
}

.item-title {
  flex: 3;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed red;
}

.item-description {
  flex: 1;           /* also try flex: 2 for a narrower gap between items */
  font-size: 12px;
  border: 1px dashed red;
}

hr {
  position: absolute;
  top: 100px;
  background: blue;
  width: 95vw;
}

<div class="item">
  <div class="item-title">Title</div>
  <div class="item-description">Some descriptive text</div>
</div>

<div class="item">
  <div class="item-title">A Much Longer Title</div>
  <div class="item-description">Some other descriptive text</div>
</div>
<hr>

jsFiddle demo 1

---

以下解决方案满足要求 #2（红线）。描述与标题的距离始终相同。但是，标题不再锚定在同一水平轴上。

• 将标题和描述放在一个弹性容器中。
• 使用上边距设置描述与标题的固定距离。
• 注意：描述的高度和垂直边距将决定标题离行多远。换句话说，描述和上边距越小，标题越接近蓝线目标。

.item-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 28px;
  border: 1px dashed red;
}

.item-description {
  margin-top: 5px;
  font-size: 12px;
}

hr {
  position: absolute;
  top: 100px;
  width: 95vw;
}

/* non-essential decorative styles */
.item {
  display: inline-flex;
  vertical-align: top;
  width: 33%;
  text-align: center;
  padding: 20px;
  border: 1px solid #CCC;
  min-height: 200px;
  margin: 20px;
  box-sizing: border-box;
}

<div class="item">
  <div class="item-title">Title<span class="item-description">Some descriptive text</span>
  </div>
</div>

<div class="item">
  <div class="item-title">A Much Longer Title<span class="item-description">Some other descriptive text</span>
  </div>
</div>

<hr>

jsFiddle demo 2