Bootstrap input-group-addon Not Vertically Aligned - css

Question

I'm using the following markup with Bootstrap:
<div class="row">
<label class="col-md-4">Date of Completion of Checklist</label>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control datepicker">
<span class="input-group-addon glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
I have some of my own CSS in a separate file, including:
.form-control {
border-color: #000;
border-radius: 0;
box-shadow: none;
}
.form-control:focus {
border-color: #009966;
}
label {
font-weight: bold;
margin-top: 8px;
}
.input-group-addon {
background: #fff;
border-color: #000;
}
However, even when I remove my whole custom stylesheet, I am still presented with this vertical alignment issue you can see below:
It looks like it's 1 pixel off what it should be. I've tried setting the positioning to relative and set bottom: 1px however it doesn't appear to budge.
If I remove the vertical-align property it completely messes up the look of it.
Does anyone have an idea what could be causing the problem?

Answer 1

.glyphicon {
top: 1px;
}
change this to top:0px; or add style="top:0px;" top your span

Answer 2

Changing your html to this fixes it:
<div class="row">
<label class="col-md-4">Date of Completion of Checklist</label>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control datepicker"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
i have moved the glyphicon glyphicon-calendar class to an <i> inside your span, which now aligns all correctly.

Answer 3

Try some thing like this input-group-addon and place span above input
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control datepicker" aria-describedby="basic-addon1">
</div>
http://getbootstrap.com/components/#input-groups