have a look at this article: http://css-tricks.com/centering-in-the-unknown/ specifically this part here:
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Good way to get something to be vertically aligned to the middle, is to change the display to a table-cell, however this won't work if you want to float it. If you want to float it, I'd suggest just wrap everything that you want floated in another div with the float on it.
EDIT
I did a little fiddling, add this to your css:
.append .vert-middle{
display: table-cell;
vertical-align: middle;
height: 33px;
}
and surround your label with a div ".vert-middle":
<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<div class='vert-middle'><span><i class="fa fa-user"></i> Username</span></div>
</div>