How to center input label and input in a row? - html

Question

I have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo

Answer 1

Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>

Answer 2

Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer 3

Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}