Question

我必须使用文本框垂直居中标签。这是小提琴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;
}

Answer 1

删除此

label.clase {
    float: left;
}

JSfiddle Demo

Answer 2

试试吧

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

Answer 3

写下这个：

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

<强> Watch here

垂直对齐标签

3 个答案: