将文本与输入和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%">