html - 在不同容器中沿同一行垂直对齐文本

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:与边距相同的结果。

• position:标题上的绝对位置。可以垂直对齐标题，但之后很难对齐描述。

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

Answer 1

我同意你的看法。我认为单独使用 CSS 是不可能的。

您的要求:

What I'd like is for the title to be vertically-centred at the same point (blue line), no matter how many lines it wraps over. The description should always stay underneath, the same distance away from the title, top-aligned (red line). So the blue line doesn't move but the red line can.

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

• 将顶级父项 (.item) 设为 flex 容器。

• 给第一个 child (.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(红线)。描述与标题的距离始终相同。但是，标题不再锚定在同一水平轴上。

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

.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