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

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

一个很好的方法（在我看来）是在 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" 将使它位于 table 中单元格的顶部。这将确保它们在垂直和水平方向上相互对齐。

Answer 2

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

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

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

试试这个：

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

一个可能的解决方案是将所有表单标签放在 div 和 class "col-left" 中，并将输入字段放在 div 和 class "col-right"。这两个都是垂直居中对齐（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>

Answer 5

将文本放在 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>

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

Vertical center an absolutely positioned input field inside its surrounding element

html

css

alignment

vertical-alignment