Twitter Bootstrap - Vertically align input with label inside control-group

css, forms, twitter-bootstrap

Solution

How about overriding Bootstrap's styles and using `display:inline-block;` instead of floats for the positioning, then you can use `vertical-align` to center the label:

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

Example fiddle

Problem

``` <div class="control-group"> <label class="control-label ">Date of purchase as detailed on your receipt</label> <div class="controls"> <div class="input-append"> <select name="invoice_date" value="2013-06-28" required="required"> <option value="">Please Select</option> </select> <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button> </div> </div> </div> ``` I tried a few solutions and one kind of worked using position absolute, but this affected other areas of bootstrap in particular when it gets responsive. http://jsfiddle.net/tGZLd/ I am trying to get the input to line up with the center of the label that has been pushed over multiple lines but in the best practice of bootstrap. Or should I simply give up and force it to display a full width label with the input underneath? Any insight would be great, thanks!

Original source