如何在HTML / CSS中垂直对齐标签

Question

我有一个带有名称和密码字段的简单登录页面，我想垂直对齐输入和标签。

这是我的代码：

HTML

<label>Nombre: </label>
<input class="name" type="text" name="nombre" placeholder="Nombre de usuario"><br>
<label>Password:</label>
<input class="pass" type="password" name="password" placeholder="Password"><br>

的CSS

.pass {
    font-family: apple;
    font-size: 14pt;
}

.name {
    font-family: apple;
    font-size: 14pt;
}

我怎么做？

Answer 1

label {
 display: inline-block;
 width: 5em;
 padding-right: 1em;
}

http://jsbin.com/wivugisu/1/

Answer 2

试试这个HTML：

<div>
    <span class="somelabel">
        <label >Nombre: </label>
    </span>
    <input class="name" type="text" name="nombre" placeholder="Nombre de usuario">
</div>
<div>
    <span class="somelabel">
        <label class="somelabel">Password:</label>
    </span>
    <input class="pass" type="password" name="password" placeholder="Password">
</div>

这个CSS：

.pass {
    font-family: apple;
    font-size: 14pt;
}

.name {
    font-family: apple;
    font-size: 14pt;
}

.somelabel {
    display: inline-block;
    min-width: 70px;
}