Question

我刚看到这个名为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>

这是我尝试过的， FIDDLE HERE ，现在看看按钮是如何降低的，几乎就像我定位它而不是从顶部给它一个负偏移，我有＆＃ 39;做了那样的事情，那么为什么会发生这种情况呢？以及我如何垂直居中彼此？

我真的很感兴趣为什么会这样，有人可以在这里回答为什么的问题。

谢谢。

亚历-Z。

Answer 1

由于您在select周围注入了HTML，因此您获得了这种奇怪的定位。

将vertical-align: bottom放在.fancy-select上的CSS中。

请参阅Fiddle。

Answer 2

将vertical-align: middle;添加到div.fancy-select。

为什么呢？因为您需要将vertical-align: middle;添加到要垂直对齐的每个元素。

即，如果您还希望标签对齐，则添加vertical-align: middle;。

Answer 3

为你的div fancy-select，fiddle Here

添加以下内容

display :inline-flex

当我使用自定义选择框时，按钮位置笨拙

3 个答案: