Html 将引导3行中的控件集居中，并进行适当的垂直对齐

我不熟悉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>

我的标签
按钮1
按钮2

在很大程度上，它给了我在Firefox和Chrome中想要的结果。控件之间的间隔很小，而且很灵敏——当屏幕变小时，控件的空白会缩小（以屏幕的百分比表示）。控件宽度通过引导col-*-#类进行控制。不过，IE似乎出于某种原因将行底部的按钮对齐。我不知道为什么

除了定义自定义CSS类而不是样式属性之外，这是实现我想要的结果的正确/最佳方法吗？或者，有没有更好的方法在CSS或引导中实现这一点？使用垂直对齐和边距使标签对齐似乎有点粗俗。此外，我开始使用表单元素和类。但是，这让事情变得更糟。使用表单元素的好处是什么？不使用表单元素的坏处是什么

我读过很多类似的帖子。但他们似乎都有一些不同的东西，以至于解决方案似乎不适合我所做的。我有一套控制，我想作为一个单位的中心。我不想简单地将它们捕捉到12列引导网格

---

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

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

---

是的，我指出我知道定义一个类比将重复的样式保留在内联中要好。我想知道我的方法是否正确。我没有使用和组织小组课，因为它似乎把一切都搞砸了。另外，“我的标签”div上的“垂直对齐：中间”也没有帮助。事实上，在Firefox中，middle把它推到了底部，这真的很奇怪。