Twitter Bootstrap - vertical alignment of input with a label inside a control group

Question

<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 several solutions, and one of them worked using the absolute position, but this affected other areas of the bootstrap, in particular when it reacted.

http://jsfiddle.net/tGZLd/

I am trying to get the input to align with the center of the label that was clicked on a few lines, but in best practice bootstrap.

Or should I just refuse and make it display a full-width label with raising the input?

Any insight would be great, thanks!

Answer 1

How about overriding Bootstrap styles and using display:inline-block; instead of float for positioning, 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; } 

Violin example

Answer 2

Add the class to the I / O, then apply a value to it.

  <div class="input-append spacedTop"> 

Then add CSS

  .spacedTop { margin-top:10px; } 

If you don't make an extra class, it will tag any other input applications that you use on your site.