html - 如何根据特定行垂直对齐内联 block 元素，忽略其他行？

Question

我有几个表单字段，每个字段都在父 display: inline-block 元素中。字段在其内部控件之前或之后可以有其他元素:

.Field {
  display: inline-block;
  border: solid 1px silver;
  width: 100px;
  padding: 2px;
  margin: 2px;
  vertical-align:middle;
  color:gray;
}
.Control {
  color:black;
  border: solid 1px navy;
  background-color:#def;
  padding:2px;
}

<div class="Field">
  Some text before the line.
  <div class="Control">This</div>
</div>

<div class="Field">
  <div class="Control">should</div>
  Some text after the line.
</div>

<div class="Field">
  <div class="Control">be</div>
</div>

<div class="Field">
  Some text before...
  <div class="Control">neatly</div>
  ...and some text after. Maybe even an image.
</div>

<div class="Field">
  is it possible?
  <div class="Control">aligned</div>
</div>

我正在尝试让 vertical-align 工作，以便字段中的“主要”(.Control) 元素彼此相邻。
每个 .Field 的基线应由其 .Control 确定。

手动指定 line-height 不是一个选项，周围的文本不应为零高度或 position: absolution:周围的文本应该仍然可见，并影响 field 的高度。

这可以用 CSS 实现吗？

Answer 1

您需要对您的标记进行小幅调整，将控制元素之后的文本放入 span 元素中。

然后去掉.Field div中的vertical-align:middle，添加.Control + span { display:table-cell }隐藏后面的文字来自垂直对齐评估的控制元素。

这给你:

.Field {
  display: inline-block;
  border: solid 1px silver;
  width: 100px;
  padding: 2px;
  margin: 2px;
  color:gray;
}
.Control {
  color:black;
  border: solid 1px navy;
  background-color:#def;
  padding:2px;
}

.Control + span {
  display: table-cell;
}

<div class="Field">
  Some text before the line.
  <div class="Control">This</div>
</div>

<div class="Field">
  <div class="Control">should</div>
  <span>Some text after the line.</span>
</div>

<div class="Field">
  <div class="Control">be</div>
</div>

<div class="Field">
  Some text before...
  <div class="Control">neatly</div>
  <span>...and some text after. Maybe even an image.</span>
</div>

<div class="Field">
  is it possible?
  <div class="Control">aligned</div>
</div>