CSS - Float and vertical middle

Question

I´m currently developing a little login and I have a little problem with the CSS. I have two inputs: Click me!

Everything is fine except that the "Username" and "Email" texts should be vertically centered. For this I´m using the "vertical-align: middle;" property. That works fine but if I add a "float: right;" to the textbox then the browser seems to ignore this vertical align and I think that´s because of the margin collapses as a result of the float attribute on my input. So I read that I should apply a "clear" attribute to the next item. I did that but it didn´t work maybe because of my HTML structure. Here is the code of my CSS and HTML:

CSS:

.append {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    background-color: #1E2229;
    border-radius: 4px;
    padding-left: 6px;
    font-size: 12px;
    border: 1px #17191F solid;
}

.append input {
    display: inline-block;
    float: right;
    height: 13px;
    outline: 0;
    background-color: #1E2229;
    color: white;
    padding: 10px;
    border-left: 1px #17191F solid;
    border-right: none;
    border-bottom: none;
    border-top: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 75%;
}

HTML:

<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<span><i class="fa fa-user"></i> Username</span>
</div>

I hope someone has a good idea that might fix my problem.

Answer 1

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>