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

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

目前，label（左侧）有点靠近输入字段的顶部（右侧）。 我想垂直对齐它们，所以 label 因为在输入字段的中间。

我试过垂直对齐但它不起作用。 请帮我找出问题所在。 谢谢。

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：

我在您的标签中添加了span，以便我们可以添加特定于文本标签的样式：

<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中，并将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> 

我把  因为它似乎是对齐不同输入类型的最简单方法; 但是，保证金工作得很好。

Answer 6

我知道这是一篇非常古老的帖子，但我觉得答案很复杂，并得出了不同的解决方案。

原作者问到label文本的隐含标注的竖alignment； 一些答案通过使用明确的标签来解决这个问题。 我认为这不是要求的。

在此处查看隐式标记与显式标记之间的区别： https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-一个输入

当我时不时地遇到问题时，我想分享我的隐式标签解决方案。

显式标记的问题很容易解决，从那时起，您将 label 作为它自己的框，并且可以将您喜欢的任何 CSS 应用于它，而不依赖于相关的输入字段。

然而，在隐式标签中，情况有所不同，此后 label 文本和输入不是此框中的分隔项。 如果您想独立于输入处理文本，我认为您别无选择，只能在文本周围添加一个跨度（注意：您不能在此处使用div 。在 label 中，只允许使用短语内容元素： https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content而 div 不是。）

这就是上面https://stackoverflow.com/a/15193954/8754067正确陈述的内容，但答案缺乏隐式和显式标签之间的二分法。 并且没有得到足够的支持（至少在我个人看来）。 因此，我觉得有必要在这里再次强调这一点。

 form { width: 400px; display: flex; flex-direction: column; gap: 0.5rem; } form label { display: grid; grid-template-columns: 10rem 1fr; gap: 0.5rem; min-width: 100%; font-size: 15px; /* increase height to see effect. */ height: 3rem; } form label span { margin-block: auto; }

 <form> <label><span>First Name (middle):</span><input type="text" id="firstname"></label> <label><span>Last Name (middle):</span><input type="text" id="lastname"></label> <label>E-Mail (default):<input type="text" id="email"></label> <label>Phone (default):<input type="text" id="phone"></label> </form>