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

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。请检查this。关键是在你的小提琴中使用以下代码。

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 here

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

3 个答案: