我希望我的標籤垂直對準我的輸入字段

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

目前，標籤（上左邊）有點偏向輸入欄的頂部（右邊）。我想垂直對齊它們，因此在輸入字段的中間標籤。

我試過垂直對齊，它不起作用。請幫我弄清楚這個問題。謝謝。

來源

2013-03-04 James Mitchell

[CSS來對齊標籤和輸入]的可能重複（http://stackoverflow.com/questions/4641346/css-to-align-label-and-input） – 2013-03-04 02:54:21

可以括在一個跨度<label>元素，並設置跨度的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/

來源

2013-03-04 03:02:56 deadlock

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

demo

來源

2013-03-04 03:06:43 jhunlio

我覺得嵌套<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>

來源

2013-03-04 04:16:37 thgaskell

您可以使用Flexbox的CSS垂直對齊。

只包裝父元素display-flex。

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

來源

2017-01-16 10:47:08

我認爲以下是唯一的方法適用於所有輸入類型。

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>

我把 ，因爲它似乎是對準不同的輸入類型的最簡單的方法;然而，利潤率工作得很好。

來源

2017-03-30 01:17:01 kornieff

我希望我的標籤垂直對準我的輸入字段

回答

相關問題