Centering input element into horizontal form Bootstrap 3

Question

I have horizontal form.

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

How to center input to label?

JSFiddle

UPD: Pls try on jsfiddle beforу answer.

Answer 1

If don't know if you want to use javascript, but in case you want, here is what you have to do:

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

And here is the example. By the way, i don't recomand you use col-sm-2 class on the label insted of a div.

If you want this script to be universal, just use this:

$( 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);
    });
});

And the result is here

Answer 2

You can do this by making .form-group a table by doing display:table;, and then apply vertical-align:middle; display:table-cell; to your .centering class.

That should work, or at least push you into the right direction.

Answer 3

Simply set the child label and div as inline-block. They can then be vertically aligned:

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

http://jsfiddle.net/u4Y6R/

EDIT: I've also added an arbitary max-width to the label (although I assume you've already sized your labels and fields as required)