How to center align the label horizontally with select (drop down) in a form?

Question

Label Not Center aligned with Drop Down box

The label "User Type" needs to be center aligned with respect to the select (drop down box) next to it.

I tried all tricks and nothing worked. I tried to add line-height attribute as suggested by this answer : How to align label and select box vertically (middle)

I tried to add display:inline-block as suggested by this answer :

Align labels in form next to input

But nothing solved my problem.

Here is the necessary code snippet.

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

You can update it by using following flex box code

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>

Answer 2

You can use CSS Flexbox for this, like:

.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>

Hope this helps!