在Bootstrap 3行中以适当的垂直对齐为中心设置控件

Question

我是web开发的新手，特别是CSS和Bootstrap。我正在努力在引导行中心设置5个项目。以下是我的文件:

<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中是否有更好的方法来做到这一点?它似乎hackish不得不使用垂直对齐和边距来使标签对齐。此外，我开始使用表单元素和类。但是，这让事情变得更糟。使用form元素的好处是什么，不使用它的坏处是什么?

我读了很多类似的帖子。但他们似乎都有一些不同的东西，以至于解决方案似乎不适合我正在做的事情。我有一组控件，我希望它们作为一个单位居中。我不想简单地将它们捕捉到12列Bootstrap网格。

JSFiddle

Answer 1

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

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