我希望我的 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>