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提供宽度：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

{{1}}

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

Answer 4

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

＆＃13;

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

＆＃13;

这将使用BootStrap来使用，以便在行中列出它。

Answer 5

一种可能的解决方案是将所有表单标签放在一个div中，使用类＆＃34; col-left＆＃34; ＆安培;带有类＆＃34; col-right＆＃34;的div中的输入字段。这两个都是垂直中间对齐的（垂直对齐：中间）和＆amp;保持标签的左列具有相等的宽度设置。

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

垂直中心位于其周围元素内的绝对定位输入区域

5 个答案: