html - Bootstrap 3 行中的中心控件集，具有适当的垂直对齐

Question

我是网络开发新手，尤其是 CSS 和 Bootstrap。我正在努力将 5 个元素集中在 Bootstrap 行中。这是我所拥有的:

<div class="container-fluid">
    <div class="row text-center" style="border:2px solid green">
        <div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
        <div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
            <input class="form-control" type="number"></input>
        </div>
        <div style="width:2%;display:inline-block;float:none"></div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
            <button class="btn btn-default btn-block" role="button">Button1</button>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
            <input class="form-control" type="number"></input>
        </div>
        <div style="width:2%;display:inline-block;float:none"></div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
            <button class="btn btn-default btn-block" role="button">Button2</button>
        </div>            
    </div>
</div>

在大多数情况下，它为我提供了我在 Firefox 和 Chrome 中想要的结果。控件之间的间距很小并且响应迅速——随着屏幕变小，空白区域缩小，而控件变大(以屏幕的百分比表示)。控件宽度通过 Bootstrap col-*-# 类进行控制。虽然，IE 似乎出于某种原因将按钮对齐在行的底部。我不确定为什么。

除了定义自定义 CSS 类而不是样式属性之外，这是实现我想要的结果的正确/最佳方法吗？或者，在 CSS 或 Bootstrap 中是否有更好的方法来做到这一点？必须使用 vertical-align 和 margin 来让标签对齐似乎很老套。此外，我开始使用表单元素和类。但是，这让事情变得更糟。使用表单元素有什么好处或不使用表单元素有什么坏处？

我阅读了许多类似的帖子。但他们似乎都有足够的不同之处，以至于解决方案似乎不适合我正在做的事情。我有一组控件，我希望它们作为一个单元居中。我不想简单地将它们对齐到 12 列的 Bootstrap 网格。

JSFiddle

Answer 1

您仍然可以在需要时使用自定义类:

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