0

我必须将带有文本框的标签垂直居中。这是小提琴http://jsfiddle.net/TAavK/。标签在输入的顶部，但我想把它放在这个的中心。我能怎么做？

    <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;
}
4

3 回答 3

2

删除这个

label.clase {
    float: left;
}

JSfiddle 演示

于 2014-05-13T12:16:05.627 回答
1

试试看

<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>

仅更改此 css 类

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

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

于 2014-05-13T12:24:08.390 回答
0

写这个：

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

在这里观看

于 2014-05-13T12:17:13.003 回答