html - 如何在bootstrap 3中制作垂直中间

Question

我正在开发 Bootstrap 3 框架。在某个阶段，我必须在某些列中使垂直居中对齐。所以，我应用了一个自定义 CSS 类，例如:

.valign {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

当我只有一行时它会起作用。但是，当我一个接一个地有多行时，这是行不通的。请看我的 fiddle :http://jsfiddle.net/learner73/6mM8G/

我想要，在左边<label></label>在输入字段/选择框的透视图中应该垂直居中。 The <p>This will define your Personality</p>也应该沿着选择框垂直对齐。但是，一切都崩溃了(例如，“写下你的名字:”并且输入字段是一行，现在被打破了；“这将定义你的个性”文本在右侧，现在在分解后位于左侧等)当我对列使用自定义类以删除 float 并制作 display: inline-block 时

那么，我怎样才能使我的 <label></label>和 <p></p>左列的 vertical: middle ？

Answer 1

你为什么不使用引导类？例如，您可以使用 Horizontal form它可能会帮助您实现您所需要的。

这是他们网站上出现的一段代码，可以帮助您:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="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">Sign in</button>
    </div>
  </div>
</form>