如何在两个引导列中垂直居中块？

Question

我有这个 html：

<div class="col-xs-12">
    <div class="row">
        <div class="col-xs-8">
            <h2>Some big header</h2>
        </div>
        <div class="col-xs-4 select">
            <select class="form-control">
                <option>TMP</option>
            </select>
        </div>
    </div>
    <div class="row">some more text</div>
</div>

我得到了这个结果：

标签h1 上有margin 属性，所以h1 上面有一些空格。 select上方没有这个空间，所以这个元素没有居中。

“你试过什么？”

我尝试过糟糕而可怕的方法。我知道它可以用来使 div 居中。但不是在这种情况下...我已将line-height 和height 属性添加到选择中：

.select {
  height: 80px;
  line-height: 80px;
}

.form-control {
    display: table-cell;
}

是的，它起作用了，但它根本不是相对的。如果在左栏中会有h2 文本，而不是h1 怎么办？

jsFiddle example of "what you tried?"

另外，“你尝试过什么？” 2：我尝试使用form-horizontal 类。看这个：

还有代码：

<div class="col-xs-12 form-horizontal">
    <div class="row form-group">
        <div class="col-xs-8">
            <h2 class="control-label">Some big header</h2>
        </div>
        <div class="col-xs-4 ">
            <select class="form-control">
                <option>TMP</option>
            </select>
        </div>
    </div>
</div>

此外，左列中的文本是右对齐的（作为表单标签，很明显）。我不想要这个。

jsFiddle example of "what you tried?" 2

所以问题是：如何使两个元素垂直居中？非常喜欢使用引导类和方法。不要建议您指定 div 的高度、边距或填充的方法：它根本不是相对的。

Answer 1

为了能够使用垂直对齐，我认为您需要覆盖引导类使用的浮动，并为列使用inline-block。这不完全是一种引导方法，但我认为它有效并且响应迅速。有一个缺点可能有点烦人，那就是您需要确保divs 之间没有空格...

<div class="col-xs-12">
    <div class="row">
        <div class="col-xs-8 vcenter-col">
            <h2 class="control-label">Some big header</h2>
        </div><!-- comment required to prevent line break...
     --><div class="col-xs-4 vcenter-col">
            <select class="form-control">
                <option>TMP</option>
            </select>
        </div>
    </div>
</div>

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

Jsfiddle

我是否正确理解了您的问题？

Answer 2

试试这个 CSS：

h2 {
    margin: 0;
}

BootStrap 在 CSS 中做了很多事情，因此请注意正确设置您的 CSS 选择器以不覆盖所有 BootStrap CSS。

但是，你的 HTML 不能改变吗？在我看来，H2 元素应该是一个标签。