具有水平形式的长文本的<label>不会垂直居中于输入字段</label>的对面

Question

我是Twitter Bootstrap的新用户。

我有一个表单，这个表单里面有一个标签，里面有很长的文字（所有文字只能放在一行，因此我的标签占据多行）。这是标记：

<form class="form-horizontal" role="form">
<div class="form-group">
        <label for="doc_acq" class="col-sm-3 control-label text-muted">Very very very very very very very very very long label name here</label>
        <div class="col-sm-9">
            <input field="mandatory_field" type="text" class="form-control" name="doc_acq" id="doc_acq"></input>
        </div>
     </div>
</div>
</form>

以下是我在浏览器中的显示效果：

如您所见，标签不在输入字段的中心。我该如何居中呢？

Answer 1

我对你的html进行了一些编辑并添加了一个css类

DEMO

<div class="row">
    <div class="col-xs-3 col-md-2 col-lg-1 vcenter">
        <label for="doc_acq" class="control-label text-muted">Very very very very very very very very very long label name here</label>
    </div>
    <div class="col-xs-8 col-md-9 col-lg-10 vcenter">
       <input field="mandatory_field" type="text" class="form-control" name="doc_acq" id="doc_acq"/>

    </div>   

</div>

添加了这个css类

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

以这种方式输入字段始终以标签

垂直居中