如何根据特定的行垂直对齐内联块元素,忽略其他行？

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,使字段中的"main"()元素彼此相邻.
每个基线.Field应由其确定.Control.

指定line-height手动不是一个选项,并且周围的文本不应该具有零高度或position: absolution:周围的文本应该仍然可见,并影响字段的高度.

这可能与CSS有关吗？

Answer 1

您需要对标记进行小幅调整,将控制元素后面的文本放入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>