对齐textarea字段旁边的标签，居中？纯css解决方案

Question

所以我得到了这个片段： （这是jsfiddle）

<div><label style="height: 58px;">Label</label>
    <textarea>11111</textarea>
</div>

<br/>
<br/>
<br/>
<br/>

<div><label style="height: 158px;">Label</label>
    <textarea style="height:199px">11111</textarea>
</div>

这是css

label{
    display:inline-block;
    background-color: grey;
}

这是悲伤的结果：

我希望标签位于textarea字段的中心。有人知道这里发生了什么？

Answer 1

您必须为textarea设置vertical-align: middle属性（或者您要为其指定标签的任何元素 - 例如，也适用于多个选择）。

Working fiddle here

Answer 2

检查此jsFiddle

使用vertical-align CSS属性设置中间值来解决此问题。

HTML

<div>
    <label>Label</label>
    <textarea>11111</textarea>
</div>

<br/>
<br/>
<br/>
<br/>

<div>
    <label>Label</label>
    <textarea style="height:199px;">11111</textarea>
</div>

CSS

textarea{
    vertical-align: middle;
}