將文本與輸入和div對齊

Question

我希望我用作邊框的div垂直居中。但它看起來像股利會向上

<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> 
 
<div style="width:1px; height:20px; background-color:grey;display: inline-block"></div> <label> Iteration </label> <input type="text" style="width:10%">

Answer 1

使用vertical-align: middle;垂直對齊。

<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> <div style="width:1px; height:20px; background-color:grey;display: inline-block;vertical-align: middle;"></div> <label> Iteration </label> <input type="text" style="width:10%">

Answer 2

<label> Application </label> <input type="text" style="width:10%; bottom:20px;">  
<div style="width:1px; height:20px; background-color:grey;margin:-5px 0px;display: inline-block"></div> 
<label> Iteration </label> <input type="text" style="width:10%"> 

或

<div style="width:1px; height:20px; background-color:grey;vertical-align:middle;display: inline-block"></div> 

Answer 3

<label> Application </label> <input type="text" style="width:10%; bottom:20px;">&nbsp;<div style="width:1px; height:20px; background-color:grey;display: inline-block; vertical-align:bottom;"></div>&nbsp;<label>Iteration</label> <input type="text" style="width:10%">

Answer 4

您可以使用vertical-align: middle。

但是更好的做法是使用邊框繪製分隔線 - 參見下面的示例代碼片段。

請檢查並讓我知道您對此的反饋。謝謝！

.left-border { 
 
    border-left: 1px solid grey; 
 
    padding-left: 5px; 
 
}

<label>Application</label> 
 
<input type="text" style="width:10%; bottom:20px;"> 
 
<label class="left-border">Iteration</label> 
 
<input type="text" style="width:10%">