我希望我的标签与我的输入字段垂直对齐

Question

这是我迄今为止的工作:

http://jsfiddle.net/2RCBQ/

<div id="main">
<form>
    <label>First Name:<input type="text" id="firstname"></label><br/>
    <label>Last Name:<input type="text" id="lastname"></label><br>
    <label>E-Mail:<input type="text" id="email"></label><br/>
    <label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>

CSS

#main {
    width:300px;

}  

#main input {
    float:right;
    display:inline;
}

#main label {
    color: #2D2D2D;
    font-size: 15px;
    width:250px;
    display: block;
}

目前,标签(在左侧)有点朝向输入字段的顶部(在右侧).我想垂直对齐它们所以标签,因为在输入字段的中间.

我试过了vertical-align,它不起作用.请帮我解决问题.谢谢.

Answer 1

我觉得嵌套<span>增加了很多不必要的标记.

display: inline-block让<label>和<input>坐在旁边彼此就像对待float: right,但不破坏文件流.此外,它更加灵活,如果您(或用户的屏幕阅读器)想要更改,则可以更好地控制对齐font-size.

编辑:jsfiddle

label, input {
    display: inline-block;
    vertical-align: baseline;
    width: 125px;
}

label {
    color: #2D2D2D;
    font-size: 15px;
}

form, input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

form {
    width: 300px;
}

<form>
    <label for="firstname">First Name:</label><input type="text" id="firstname">
    <label for="lastname">Last Name:</label><input type="text" id="lastname">
    <label for="email">E-Mail:</label><input type="text" id="email">
    <label for="phone">Phone:</label><input type="text" id="phone">
</form>

Answer 2

您可以使用flexbox CSS进行垂直对齐。

只需包装父元素display-flex。

.display-flex {
    display: flex;
    align-items: center;
}

Answer 3

您可以将<label>元素包含在跨度中并将跨度设置vertical-align为middle

超文本标记语言

<div id="main">
    <form> <span><label>First Name:<input type="text" id="firstname" /></label></span>
        <br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span>
        <br/> <span><label>E-Mail:<input type="text" id="email" /></label></span>
        <br/> <span><label>Phone:<input type="text" id="phone" /></label></span>
        <br/>
    </form>
</div>

CSS

#main {
    width:300px;
}
#main input {
    float:right;
    display:inline;
}
#main label {
    color: #2D2D2D;
    font-size: 15px;
}
#main span {
    display: table-cell;
    vertical-align: middle;
    width:250px;
}

http://jsfiddle.net/2RCBQ/2/