垂直对齐标签

Question

I have to center vertically a label with a textbox. This is the fiddle http://jsfiddle.net/TAavK/ . The label is in the top of the input, but I want to put this in the center of this. How can I do?

    <form class="pure-form pure-form-aligned">
        <div class="pure-control-group">
            <label for="txtUsuario" class="clase">User</label>
             <input type="text" name="txtUsuario" />
        </div>
        <div class="pure-control-group">
           <label for="txtPass" class="clase">Password</label>
           <input type="password" name="txtPass" />
        </div>
    </form>

.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
    display: inline-block;
    margin: 0 1em 0 0;
    text-align: right;
    vertical-align: middle;
    width: 15em;
}
label.clase {
    float: left;
}
input {
    width: 30%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 3px #DDDDDD inset;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.5em 0.6em;
    vertical-align: middle;
    line-height: normal;
    font-size: 100%;
    margin: 0;
}

Answer 1

Remove this

label.clase {
    float: left;
}

JSfiddle Demo

Answer 2

Try it

<form class="pure-form pure-form-aligned">
    <div>
        <div class="pure-control-group">
            <label for="txtUsuario" class="clase">User</label>
        </div>
        <div class="pure-control-group">
            <input type="text" name="txtUsuario" />
        </div>
    </div>
    <div>
        <div class="pure-control-group">
            <label for="txtPass" class="clase">Password</label>
        </div>
        <div class="pure-control-group">
            <input type="password" name="txtPass" />
        </div>
    </div>
</form>

Change only this css class

.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/TAavK/9/

Answer 3

write this:

   label.clase 
   {
     margin: auto;
     top: 0; left: 0; bottom: 0; right: 0;
   }

Watch here