html - 如何使输入字段在标签中间排成一行？

Question

这是我面临的问题的一个例子:
https://jsfiddle.net/v10un11s/1/

这是我的 HTML:

<div>
  <div class="component">
    <div>
      <label for="test1" id="short-label">Short label: </label>
    </div>
    <div>
      <input type="text" id="test1" />
    </div>
  </div>
  <div class="component">
    <div>
      <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label>
    </div>
    <div>
      <input type="text" id="test2" />
    </div>
  </div>
</div>

我的CSS: .

component > div:first-child {
  width: 150px;
  text-align: right;
  margin-right: 5px;
  margin-bottom: 10px;
}

.component > div {
  display: inline-block;
}  

这会导致输入字段排在标签的右侧。这就是我想要的，但是，它位于一个很长的标签行的末尾。

我真正想要的是输入字段行向右并向标签的相对中间。

所以在上面的 JS Fiddle 示例中，我希望输入字段排在长标签第三行的右侧。

我一直在研究边距、边距、行高等等，但一直无法找到正确的解决方案。

Answer 1

只需一行 CSS 即可解决问题!

.component > div {
  display: inline-block;
  vertical-align: middle;
}  

请记住，这是双向的 - 所以如果你的输入比你的标签高，标签将以输入为中心。