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

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

1 个答案: