如何基于特定线垂直对齐行内块元素，而忽略其他行？

Kobi 发表于 Dev

科比

我有几个表单字段，每个都在父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以使字段中的“ main”（）元素彼此相邻。
每个基准.Field应由其基准确定.Control。

line-height手动指定不是一种选择，并且周围的文本不应具有零高度或position: absolution：周围的文本仍应可见，并影响字段的高度。

CSS有可能吗？

阿罗奇

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

然后vertical-align:middle从.Field div中删除。，然后.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>