如何在标签中水平对齐标签与选择（下拉）？

Question

标签Not Center与Drop Down框对齐

标签“用户类型”需要相对于其旁边的选择（下拉框）居中对齐。

我尝试了所有技巧，没有任何效果。 我尝试按照以下答案建议添加line-height属性： 如何对齐标签并垂直选择框（中）

我尝试按照这个答案的建议添加display：inline-block：

在输入旁边的表格中对齐标签

但没有解决我的问题。

这是必要的代码段。

HTML：

<div class="form-inline">
                            <label for="admin-picker" class="label-admin">User type</label>
                                <select class="form-control" id="admin-picker" name="admin_privilege" required>
                                    <option value="0">Normal</option>
                                    <option value="1">Admin</option>
                                </select>
                        </div>

CSS：

#user-management-form .form-control { margin-bottom: 15px; }

Bootstrap.css：

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

Answer 1

您可以使用CSS Flexbox ，例如：

.form-inline {
  display: flex;
  align-items: center;
}

label {
  margin: 0;
}

 .form-inline { display: flex; align-items: center; } label { margin: 0; flex-basis: 100px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-inline"> <label for="admin-picker" class="label-admin">User type</label> <select class="form-control" id="admin-picker" name="admin_privilege" required> <option value="0">Normal</option> <option value="1">Admin</option> </select> </div> 

希望这可以帮助！

Answer 2

您可以使用以下弹性框代码更新它

 label { font-size: 12px; margin:0 10px **15px** 0; } select { height: 40px; } .form-inline { display: flex; align-items: center; justify-content: flex-start; } .form-control { display: inline-block; width: auto; vertical-align: middle; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } 

 <div class="form-inline"> <label for="admin-picker" class="label-admin">User type</label> <select class="form-control" id="admin-picker" name="admin_privilege" required> <option value="0">Normal</option> <option value="1">Admin</option> </select> </div>