我希望我的标签垂直对准我输入字段(I Want my Label to Vertically Ali

这是我的工作是什么至今：

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

目前，标签（左侧）是一种对输入字段（右侧）的顶部。 我想垂直对齐他们，所以标签，因为在输入字段的中间。

我试过垂直对齐，它不工作。 请帮我揣摩的问题。 谢谢。

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:

HTML：

我在你的标签添加跨度，以便我们可以添加特定样式的文本标签：

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

CSS：

#main label span {
    position:relative;
    top:2px;
}

演示

Answer 4:

你可以附上<label>在一个span元素，并设置跨度的vertical-align到middle

HTML

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

Answer 5:

我认为，以下是对所有输入类型工作的唯一方法。

 label { display: flex; align-items: center; } input { margin: 0; padding: 0; } 

 <label><input type="checkbox">&nbsp; HTML</label> <label><input type="radio">&nbsp; JS</label> <label>CSS &nbsp;<input type="text"></label> <label>Framework &nbsp; <select><option selected>none</option></select> </label> 

我把  因为它似乎是对准不同的输入类型的最简单的方法; 然而，利润率工作得很好。

文章来源: I Want my Label to Vertically Align With my Input Field