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;
}

score 2 · Answer 1 · answered Sep 11 '17 at 05:37

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!

Hey Thanks a lot. I made a small change to the margin field and it worked. #user-management-form .form-control { margin-bottom: 15px; } This line where I have kept 15px for margin-bottom should be considered in this part also label { font-size: 12px; margin:0 10px 15px 0; }. If you feel this question will be useful for others Please do upvote :) — Ganesh Ramachandran, Sep 14 '17 at 05:14

score 1 · Accepted Answer · edited Sep 11 '17 at 07:19

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>

edited Sep 11 '17 at 07:19

Ganesh Ramachandran

171
2
11

answered Sep 11 '17 at 05:39

Anmol Sandal

1,468
1
9
16

This is working only if I remove form-control class from – Ganesh Ramachandran Sep 11 '17 at 06:31
I don't think so @GaneshRamachandran . Please add the styles of form-control. so that i can check in the snippet and provide you the appropriate answer – Anmol Sandal Sep 11 '17 at 06:35
form-control is a bootstrap class. I will edit the question to add that class contents. – Ganesh Ramachandran Sep 11 '17 at 06:39
Ok you are using bootstrap 3 or 4, i will check that in case – Anmol Sandal Sep 11 '17 at 06:40
Bootstrap v3.3.7 to be precise. – Ganesh Ramachandran Sep 11 '17 at 06:41
Ok @GaneshRamachandran , i did the same, i added class styles into my code and it seems to work fine. please check i have updated my code. – Anmol Sandal Sep 11 '17 at 06:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154106/discussion-between-anmol-sandal-and-ganesh-ramachandran). – Anmol Sandal Sep 11 '17 at 07:10
Hey Thanks a lot. #user-management-form .form-control { margin-bottom: 15px; } This line where I have kept 15px for margin-bottom should be considered in this part also label { font-size: 12px; margin:0 10px 15px 0; } – Ganesh Ramachandran Sep 11 '17 at 07:16
So could you upvote and mark it correct if you found it helpful, so others can follow this too. – Anmol Sandal Sep 11 '17 at 07:19
Could you upvote the question if you think this will help others. – Ganesh Ramachandran Sep 13 '17 at 06:33
Sure, i will do it. – Anmol Sandal Sep 13 '17 at 06:37

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

2 Answers2