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

I Want my Label to Vertically Align With my Input Field

提问by James Mitchell

Here is what my work is so far:

这是我目前的工作：

http://jsfiddle.net/2RCBQ/

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

CSS

#main {
    width:300px;

}  

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

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

Currently, the label (on the left) is kind of towards to top of the input field (on the right). I want to vertically align them so the label since in the middle of the input field.

目前，标签（左侧）有点朝向输入字段的顶部（右侧）。我想垂直对齐它们，以便标签位于输入字段的中间。

I've tried vertical-align and it does not work. Please help me try to figure out the problem. Thanks.

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

回答by thgaskell

I feel nesting <span>adds a lot of unnecessary markup.

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

display: inline-blocklets the <label>and <input>sit next to each other just like with float: rightbut without breaking document flow. Plus it's much more flexible and allows more control over alignment if you (or the user's screen reader) want to change the font-size.

display: inline-block让<label>和<input>坐在一起，就像 with 一样，float: right但不会破坏文档流程。此外，如果您（或用户的屏幕阅读器）想要更改font-size.

Edit: jsfiddle

编辑：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>

回答by Fadi Abo Msalam

You can use flexbox css to vertical align.

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

Just wrap the parent element display-flex.

只需包装父元素display-flex。

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

回答by jhunlio

html:

html：

I add span in your label so we can add style specific for the text label:

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

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

css：

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

demo

演示

回答by kornieff

I think that the following is the only method that works for all input types.

我认为以下是适用于所有输入类型的唯一方法。

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 put  because it seems to be the simplest way to align different input types; however, margins work just fine.

我 之所以这么说是因为它似乎是对齐不同输入类型的最简单方法；然而，边距工作得很好。

回答by deadlock

You can enclose the <label>elements in a span and set the span's vertical-alignto middle

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

HTML

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

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/

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