Bootstrap input group addon alignment problems

Question

My input group addon doesn't line up with my input text box... what am I doing wrong?

<div class="form-group">
    <label for="primary">Primary:</label>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-earphone"></span>
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
    </div>
</div>

The above code renders this:

The addon is 1px lower than the text box, but I can't work out why!

http://www.bootply.com/iR1SvOyEGH

Answer 1

Try This One.

This problem comes in chrome..

just do some changes

<div class="form-group">

        <div class="col-md-12">
        <div class="col-md-1">
            <label for="primary">Primary:</label>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
                </div>
            </div>


            </div>
        </div>

Answer 2

This is an easy fix: glyphicon has a default class in css with top: 1px;

You need to take that off, by making your own class or just changing it if that is the only place you are using glyphicon. I'm not sure why they do this by default but it will definitely make your eyes sad. The entire thing looks like this in css:

.glyphicon {
    position: relative;
    top: 1px;    <----------------------------- Here is your culprit
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;