将文本与输入和 div 对齐答案

【问题标题】：Align text with input and div将文本与输入和 div 对齐
【发布时间】：2016-12-22 14:22:59
【问题描述】：

我希望用作边框的 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%">

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用vertical-align: middle。

但更好的做法是使用边框绘制分隔线 - 请参阅下面的示例 sn-p。

检查并让我知道您对此的反馈。谢谢！

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用vertical-align: middle; 垂直对齐。

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

【讨论】：