html - 如何在两个引导列中垂直居中 block ？

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-horizo​​ntal 类。看这个:

还有代码:

<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

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

<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

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