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


label not center aligned drop down box

label not center aligned drop down box

the label "user type" needs center aligned respect select (drop down box) next it.

i tried tricks , nothing worked. tried add line-height attribute suggested answer : how align label , select box vertically (middle)

i tried add display:inline-block suggested answer :

align labels in form next input

but nothing solved problem.

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

you can update 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>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -