将输入元素居中到水平形式Bootstrap 3

Question

我有横向形式。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email and other some many texts and some one else and else and else and else</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
    </div>
  </div>

  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password"/>
    </div>
  </div>


</form>

如何将输入置于标签中心？

JSFiddle

UPD：请尝试使用jsfiddle进行回答。

Answer 1

如果您不知道是否要使用javascript，但如果您需要，请执行以下操作：

$( document ).ready(function() {
    var height = $('#inputEmail3').parent().prev().height();
    var dif = height - $('#inputEmail3').height();
    var margin = dif / 2;
    $('#inputEmail3').css('margin-top', margin);
});

here就是一个例子。顺便说一句，我没有重新命令你在div的标签上使用col-sm-2类。

如果您希望此脚本具有通用性，请使用以下命令：

$( document ).ready(function() {    
    $(".form-control").each(function() {
        var height = $(this).parent().prev().height(); 
        var dif = height - $(this).height();
        var margin = dif / 2;
        $(this).css('margin-top', margin);
    });
});

结果是here

Answer 2

您可以通过执行.form-group制作display:table;表格，然后将vertical-align:middle; display:table-cell;应用于.centering课程来实现此目的。

这应该有用，或者至少可以帮助你走向正确的方向。

Answer 3

只需将孩子label和div设为inline-block即可。然后它们可以垂直对齐：

.form-group > label, .form-group > div {
    display:inline-block;
    vertical-align: middle;
    max-width:50%;
}

http://jsfiddle.net/u4Y6R/

编辑：我还在标签上添加了一个仲裁max-width（尽管我假设您已根据需要调整了标签和字段的大小）