javascript - 如何在 Bootstrap 中垂直对齐输入元素？

Question

如何在 Bootstrap 中垂直对齐我的输入元素？我希望将输入放在容器的垂直中心。

HTML

    <form class="form-horizontal" role="form">
  <div class="form-group">
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
        </div>
    </div>

此外，如果缺少某些信息，我将非常乐意提供信息。

Answer 1

此处提供您的答案 How to vertically align label and input in Bootstrap 3?

使用http://getbootstrap.com/css/#forms-horizontal

<form class="form-horizontal">

或者你可以使用

<div class="parent">
    <div class="child">
    </div>
</div>

//CSS

.parent{ position: relative }
.child { position: absolute;
         top: 50%;
         transform: translateY(-50%); }