Question

标签中心与下拉框对齐

标签＆＃34;用户类型＆＃34;需要相对于它旁边的选择（下拉框）居中对齐。

我尝试了所有技巧，没有任何效果。我尝试按照这个答案的建议添加line-height属性： How to align label and select box vertically (middle)

我试图按照这个答案的建议添加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 ，例如：

protected String[] getPaths() {
    Cursor cursor = getActivity().getContentResolver()
            .query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, projection,
                    null, null, null);
    if (cursor == null)
        return null;

    String[] paths = new String[cursor.getCount()];
    File file;

    int i = 0;
    if (cursor.moveToFirst()) {
        do {
            String path = cursor.getString(cursor.getColumnIndex(MediaStore.Video.Media.DATA));
                /*
                It may happen that some image file paths are still present in cache,
                though image file does not exist. These last as long as media
                scanner is not run again. To avoid get such image file paths, check
                if image file exists.
                 */
            file = new File(path);

            if (file.exists()) {
                paths[i] = path;
                i++;
            }

        } while (cursor.moveToNext());
    }
    cursor.close();
    return paths;
}

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

label {
  margin: 0;
}

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

希望这有帮助！

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>

如何将标签水平对齐并在表单中选择（下拉）？

2 个答案: