CSS Вертикальное выравнивание по середине

Я пытаюсь выровнять элемент SPAN по вертикали в середине родительского элемента.

Вот что я делаю:

Я пытаюсь сделать так, чтобы метки имени пользователя и пароля были выровнены по вертикали (посередине) с полями ввода.

Вот мой HTML-код:

<div class="login_field_wrap">
    <span>Username</span>
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
    <div class="clear"></div>
</div>

Вот что я пробовал:

.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }

Вертикальное выравнивание элемента изображения внутри этого обертывающего DIV работает абсолютно нормально, ну, во всяком случае, в Chrome, оно просто не будет выравниваться с моим SPAN !

Любая помощь была бы замечательной.