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

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上方有一些空格。 <{1}}以上没有这样的空格，因此这些元素不会居中。

＆＃34;您尝试了什么？＆＃34;

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

height

是的，它有效，但它根本不是相对的。如果在左栏中会有.select { height: 80px; line-height: 80px; } .form-control { display: table-cell; } 文字，而不是h2怎么办？

jsFiddle example of "what you tried?"

此外，＆＃34;您尝试了什么？＆＃34; 2：我尝试使用h1课程。看这个：

代码：

form-horizontal

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

jsFiddle example of "what you tried?" 2

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

Answer 1

为了能够使用垂直对齐，我认为你需要覆盖bootstrap类使用的浮动，并使用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

我的问题是否正确理解？

Answer 2

试试这个CSS：

h2 {
    margin: 0;
}

BootStrap在CSS中做了很多事情，所以要小心纠正将CSS选择器设置为不覆盖所有BootStrap CSS。

但是，您的HTML无法改变吗？在我看来，H2元素应该是LABEL。