垂直居中其周围元素内的绝对定位输入字段

Question

我只是想在其周围的 DIV 中垂直居中输入字段，但同时页面上的所有输入字段都应彼此水平对齐（如果您愿意，应该具有相同的 left 值）。

这是问题的示例页面：

.wrapper {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  line-height: 40px;
}
.inputClass {
  position: absolute;
  left: 25%;
  /* top: 50%; transform: translate(0, -50%); */
  /* not working as I need */
  vertical-align: middle;
}

<div class="wrapper">
  <div>
    <div>
      Some text
      <input type="text" class="inputClass" />
    </div>
    <div>
      Some more text
      <input type="text" class="inputClass" />
    </div>
  </div>
</div>

期望的结果（Firebug 的蓝色边缘）：

Answer 1

您可以在字段集中对输入+标签进行分组，然后使用标签将输入移向中心，

试试这个：

.wrapper {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  line-height: 40px;
}

fieldset {
  border: 0;
  /*resets UA*/
}
 /*can use label to move inputs right*/
label {
 width:40%;
 display:inline-block;
 padding-right :15px;
 text-align:right
 }

<div class="wrapper">
  <div>
    <fieldset>
      <label for='one'>Some text</label>
      <input id='one' type="text" class="inputClass" />
    </fieldset>
    <fieldset>
      <label for='two'>Some more text</label>
      <input id='two' type="text" class="inputClass" />
    </fieldset>
  </div>
</div>

Answer 2

将文本放在label 中（无论如何这是一个好习惯）并使用内联块将元素放在一起。然后，您可以根据需要为 label 指定宽度：

.wrapper {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  line-height: 40px;
}
.wrapper label {
  display:inline-block;
  width:25%;  
  vertical-align:middle;
}
.wrapper input {
  display:inline-block;
  vertical-align:middle;
}

<div class="wrapper">
  <div>
    <div>
      <label for="field1">Some text</label>
      <input id="field1" type="text" class="inputClass" />
    </div>
    <div>
      <label for="field2">Some more text</label>
      <input id="field2" type="text" class="inputClass" />
    </div>
  </div>
</div>

Answer 3

一个很好的方法（在我看来）是使用 HTML 中的 table 标签来组织输入字段和标签。然后我会使用“valign”属性并将其设置为“TOP”，例如

<table>
  <tr>
    <td valign="TOP">
      Some text
    </td>
    <td valign="TOP">
      <input type="text" class="inputClass" />
    </td>
  </tr>
  <tr>
    <td valign="TOP">
      Some more text
    </td>
    <td valign="TOP">
      <input type="text" class="inputClass" />
    </td>
  </tr>
</table>

分配给 TD 的 valign="TOP" 将使其位于表格中单元格的顶部。这将确保它们彼此垂直和水平对齐。

Answer 4

不使用表格标签的另一个答案：

<style>
  li {
    width: 120px;
  }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
  <ul class="list-inline">
    <li>Some text</li>
    <li>
      <input type="text">
    </li>
  </ul>
  <ul class="list-inline">
    <li>Some more text</li>
    <li>
      <input type="text">
    </li>
  </ul>
</div>

这将用于 BootStrap 以便将其列在一行中。

Answer 5

一种可能的解决方案是将所有表单标签放在一个具有“col-left”类的 div 中，并将输入字段放在一个具有“col-right”类的 div 中。这两个都是垂直居中对齐的（vertical-align: middle）& 左侧的标签列具有相等的宽度设置。

请在下面找到完整的解决方案：

.wrapper {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  line-height: 40px;
}
.col-left, .col-right {
  vertical-align: middle;
  display:inline-block;
}
.col-left {
  width: 20%;
}

<div class="wrapper">
  <div>
    <div class="col-left">Some text</div>
    <div class="col-right">
      <input type="text" class="inputClass" />
    </div>
  </div>
  <div>
    <div class="col-left">Some more text</div>
    <div class="col-right">
      <input type="text" class="inputClass" />
    </div>
  </div>
</div>