Jquery 当我使用自定义选择框时，按钮的位置很尴尬

我刚刚在网上遇到一个名为fancySelect的插件，并决定使用它

基本上，我需要我的自定义选择框和按钮水平并排，垂直居中。我的HTML如下所示：

<section class="container">

            <div class="row">

                <div class="col-md-6">

                        <form class="select-branch" action="" method="POST">

                            <label for="branch-select">Hospital</label>

                            <select class="" id="branch-select" name="hospital" type="text">

                                <option value="Manipal Hospital Bangalore">Hosmat Hospital Bangalore</option>

                                <option value="Manipal Northside Hospital">test Hosmat Northside Hospital</option>

                            </select>

                            <button class="btn btn-success" type="submit">contact this location</button>

                        </form>

                </div>

            </div>    

    </section>

医院
班加罗尔霍斯马特医院
霍斯马特北区医院
联系这个地点

这是我试过的，，现在看看按钮是如何降下来的，就像我定位它，然后给它一个从顶部的负偏移量，我没有做过类似的事情，那么为什么会发生这种情况呢？如何使两者垂直居中

我真的很感兴趣为什么会发生这种情况，有人能回答这里的为什么问题吗

多谢各位

---

亚历克斯-z

由于在

select

周围注入HTML，因此您得到了这种奇怪的定位

将CSS中的

垂直对齐：底部
放在
上。选择

参见。
添加
垂直对齐：中间至
div.fancy-select

为什么?？因为您需要添加
垂直对齐：中间到要垂直对齐的每个元素

例如，如果您还希望标签对齐，则添加
vertical align:middle
为您的div添加以下内容：选择、拨弄

在花式选择div上设置垂直对齐：“middle”似乎有效。不确定插件发生了什么，所以没有您的“为什么”答案。
display :inline-flex