是否可以垂直居中多行标签

Question

由于我已经研究和工作了几个小时，但没有运气，我认为答案是否定的，但希望以某种方式确认。

我在选择字段的左侧有一个多行标签。 假设标签是 3 条换行线。 我希望标签的中线与选择字段垂直匹配。 喜欢这个：

Label Line 1
Label Line 2        SelectField
Label Line 3

基本上，我的问题与几年前的问题非常相似，但没有得到明确的回答：带有文本区域和选择和文本框的垂直中心标签。 有人回答说javascript是必需的。

到目前为止，我的努力有一个小提琴。 我发现了一些有趣的变化，但没有任何东西与我正在寻找的相匹配。

有人可以确认这是否可能吗？ 谢谢！！！

[编辑：拼写]

Answer 1

试试这个

.HTML

<div class= 'divclass'>
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label>
    <select class='selectclass'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>
<div class= 'divclass'>
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label>
    <select class='selectclass'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>
<div class= 'divclass'>
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label>
    <select class='selectclass'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>

.CSS

div.divclass {
    border: 1px solid red;
    height: 150px;
    width: 400px;
}
label.labelleft {
    width: 90px;
    text-align: right;
    background: lightblue;
    display: inline-block;
    vertical-align: middle;
    float: none;
}
select.selectclass {
    width: 100px;
    display: inline-block;
    margin-left: 20px;
}

工作小提琴

Answer 2

只需使用表格。

td { vertical-align: middle; }
.narrow { width:8em; padding-right: 2em; }

<table>
  <tr>
    <td class="narrow"><label for="menu">Label text wrapped across multiple lines</label></td>
    <td><select name="menu" id="menu">
      <option>Menu item #1</option>
      <option>Menu item #2</option>
      <option>Menu item #3</option>
      <option>Menu item #4</option>
    </select></td>
  </tr>
</table>
    

Answer 3

是的，可以使用flexbox .看看这个。关键是在小提琴中使用以下代码。

div.divclass {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 150px;
  width: 400px;
  border: 1px solid red;
}
select.selectclass {
  width: 100px;
  display: flex;
}

在此处阅读有关flexbox的更多信息