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

Question

由于我已经研究和研究了好几个小时，但运气不佳，所以我认为答案是否定的，但希望以某种方式进行确认。

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

Label Line 1
Label Line 2        SelectField
Label Line 3

基本上，我的问题与几年前的这个问题非常相似，但没有明确回答:Vertical center label with text area and with select and with textbox .有人回复说需要 javascript。

我有一个 FIDDLE到目前为止，我的努力。我发现了一些有趣的变体，但没有一个与我正在寻找的相匹配。

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

[编辑:拼写]

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;
}

工作 Fiddle