将文本与输入和div对齐

Question

我希望用作边框的div垂直居中。但看起来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;垂直对齐。

＆＃13;

＆＃13;

<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%">

＆＃13;

＆＃13;

＆＃13;

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>