如何垂直排列不同高度的DIV

Question

如您所见，我对 CSS 不是很满意，而且我很难将 div 垂直居中排列。我不知道我应该再尝试什么了，所以这一定是我的 CSS.

有根本性的错误

仅供参考：我无法将标签用于输入控件。

    .lbl-ctrl-unit{
        padding-top:2px;
        padding-bottom:2px;
        float:left;
        margin-left:auto;
        margin-right:auto;
        height:auto;
        clear:both;
    }
    .lbl-control{
        background-color:#D9EDF7;
        border: 1px solid #6FA7D1; 
        border-radius:5px;
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
        padding:3px;
        width:100px;
        display: inline-block ;
        height:auto;
    }
    .input-ctrl{
        display: inline-block ;
        position: relative;
        padding-left:5px;
        padding-right:2px;        
    }
    .btn-small{
        display: inline-block ;
        position: relative;
        padding-left:5px;
        padding-right:2px;        
        width:25px;
        height:25px;
        /*background: url(../../images/plus_circle.png) no-repeat center center;*/
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
        cursor:pointer;
        border-radius:5px;
        text-align:center;
    }
    .btn-small:hover{ border: 1px solid #6FA7D1;transition: all 0.5s; }

    input[type=text] { border: 1px solid #6FA7D1; outline:0; height:25px;  padding-left: 5px; font-family:Arial; font-size:12px; transition: all 0.4s; border-radius:5px;float:left; }
    input[type=text]:hover{ background-color: #D9EDF7;}
    input[type=text]:focus { background-color: #D9EDF7;}

    <div class="lbl-ctrl-unit">
        <div class="lbl-control">xxxx xxxx xxx xxx x:</div> 
        <div class="input-ctrl"><input type="text" id="txt1" style="width: 200px" readonly="readonly" /></div>
        <div class="btn-small" onclick="alert('You are clicking on me');"></div>
    </div>

    <div class="lbl-ctrl-unit">
        <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div> 
        <div class="input-ctrl"><input type="text" id="txt2" style="width: 200px" readonly="readonly" /></div>

    </div>

    <div class="lbl-ctrl-unit">
        <div id="strain" class="lbl-control">Strain:</div> 
        <div class="input-ctrl FocusSense"><input type="text" id="txtBactName" style="width: 270px"/></div>
    </div>

编辑：

这是我要设置的布局：

Answer 1

div#someid {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

Answer 2

如果将元素的位置设置为 inline，容器的 line-height 的值与其 height 的值相同，然后将 vertical-align:middle 应用于容器：

还要注意 white-space:nowrap; 阻止按钮换行到容器中的第二行 div，并且由于我们从按钮的位置删除了 block，您可以拉伸通过应用更大的 padding-left 使其达到其大小（将其删除以查看会发生什么）

  .lbl-ctrl-unit {
      padding-top:2px;
      padding-bottom:2px;
      float:left;
      height:50px;
      line-height:50px;
      vertical-align:middle;
      white-space:nowrap;
  }

  .lbl-control {
      background-color:#D9EDF7;
      border: 1px solid #6FA7D1;
      border-radius:5px;
      font-family:Arial;
      font-size:12px;
      font-weight:bold;
      padding:3px;
      display: inline;
      height:auto;
  }
  .input-ctrl {
      display: inline;
      position: relative;
      padding-left:5px;
      padding-right:2px;
  }
  .btn-small {
      display: inline;
      position: relative;
      padding-left:25px;
      width:50px;
      height:25px;
      /*background: url(../../images/plus_circle.png) no-repeat center center;*/
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
  }
  .btn-small:hover {
      border: 1px solid #6FA7D1;
      transition: all 0.5s;
  }
  input[type=text] {
      border: 1px solid #6FA7D1;
      outline:0;
      height:25px;
      padding-left: 5px;
      font-family:Arial;
      font-size:12px;
      transition: all 0.4s;
      border-radius:5px;
  }
  input[type=text]:hover {
      background-color: #D9EDF7;
  }
  input[type=text]:focus {
      background-color: #D9EDF7;
  }

<div class="lbl-ctrl-unit">
    <div class="lbl-control">xxxx xxxx xxx xxx x:</div>
    <div class="input-ctrl">
        <input type="text" id="txt1" style="width: 200px" readonly="readonly" />
    </div>
    <div class="btn-small" onclick="alert('You are clicking on me');"></div>
</div>
<div class="lbl-ctrl-unit">
    <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div>
    <div class="input-ctrl">
        <input type="text" id="txt2" style="width: 200px" readonly="readonly" />
    </div>
</div>

更新

如果您不介意使用 CSS3，您可以将您的容器转换为弹性框并将子文本框的边距设置为自动，它也会使它们居中：

  .lbl-ctrl-unit {
      padding-top:2px;
      padding-bottom:2px;
      float:left;
      margin-left:auto;
      margin-right:auto;
      height:auto;
      clear:both;
      display:flex;
  }
  .lbl-control {
      background-color:#D9EDF7;
      border: 1px solid #6FA7D1;
      border-radius:5px;
      font-family:Arial;
      font-size:12px;
      font-weight:bold;
      padding:3px;
      width:100px;
      display: inline-block;
      height:auto;
  }
  .input-ctrl {
      margin:auto;
      display: inline-block;
      position: relative;
      padding-left:5px;
      padding-right:2px;
  }
  .btn-small {
      display: inline-block;
      position: relative;
      padding-left:5px;
      padding-right:2px;
      width:25px;
      height:25px;
      /*background: url(../../images/plus_circle.png) no-repeat center center;*/
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42qXSS2gTQRgH8G+em002aZO9WEubg4iPUws9LqKRVhEMzSGIerMU6tGrBaGXQnqRUvoAxYtC0AYFC6L1ENBDe9B6qC148JaWxWwoRAmb7mOcSUHoIeLiwCwDs/Ob/8c3CP5zoG4bGat4BVHGEcaARODWq+X3kYBT91cdEe8xMaFA3Kb9bWa8LxIwPPvGEYleMxQAQbNh7zy4Hg0YKb1zwMiYlFJArQN7417u70D69JAsFwNGCLjRA9lb03WkAEaByRL215ZPHtS+QygjyVDw4+um+AP0WYVcZmziNecMNM6QxhiQuKHHYjrinAOlJCSh57YOfeH6IQQCQX1t4dr26tKHDtB/sThqjE2t6zEOMYkkdA1SRgJUfEwIIDnlBzx558+2B6FcNypzuS/l+WoHGLx8YzR19e56XOOgkHTKAJVCAYTKw5iAkIcCGbjpeuADBqdSyn169vAIyF4Yt8xLt5/q2tHtybgOyRODA5gyohJgjPxWfa+mgF/toAPZb5/c3HqxvNm1C5OV7QZJmRkFhLKNK4Xz0do49WqnwSWg6vclsJg/GxXYPZZgMX8mGjD5cteBpGmqtxE2HftR4Vw0wCreGeGazuQfwjtsex+fP/4cCfjX8RvdPJ8RObomxgAAAABJRU5ErkJggg==') no-repeat center center;
      cursor:pointer;
      border-radius:5px;
      text-align:center;
  }
  .btn-small:hover {
      border: 1px solid #6FA7D1;
      transition: all 0.5s;
  }
  input[type=text] {
      border: 1px solid #6FA7D1;
      outline:0;
      height:25px;
      padding-left: 5px;
      font-family:Arial;
      font-size:12px;
      transition: all 0.4s;
      border-radius:5px;
      float:left;
  }
  input[type=text]:hover {
      background-color: #D9EDF7;
  }
  input[type=text]:focus {
      background-color: #D9EDF7;
  }

<div class="lbl-ctrl-unit">
    <div class="lbl-control">xxxx xxxx xxx xxx x:</div>
    <div class="input-ctrl">
        <input type="text" id="txt1" style="width: 200px" readonly="readonly" />
    </div>
    <div class="btn-small" onclick="alert('You are clicking on me');"></div>
</div>
<div class="lbl-ctrl-unit">
    <div class="lbl-control">yyyyy yyyyy yyyyy yy y:</div>
    <div class="input-ctrl">
        <input type="text" id="txt2" style="width: 200px" readonly="readonly" />
    </div>
</div>
<div class="lbl-ctrl-unit">
    <div id="strain" class="lbl-control">Strain:</div>
    <div class="input-ctrl FocusSense">
        <input type="text" id="txtBactName" style="width: 270px" />
    </div>
</div>

如何垂直排列不同高度的DIV

How to vertically line up DIVs with different heights

html

css