How to Align Label and Select Box Vertically (Middle)

How to align label and select box vertically (middle)

An easy way to do this is to give the label elements a line-height equal to that of the height of the dropdown selector. However, this solution depends on your labels only being a single line of text, if you have any labels that are multi-line it will not work and you should use the vertical-align method detailed above.

label {
    line-height:25px;
}

Updated JSFiddle

How to vertical-align label and select?

Try This vertical-align: middle; on .selectIcon class

.customer_form label {  width: 80px;  margin-right: 15px;  font-weight: 700;  font-size: 1em;}.selectIcon {  border-radius: 6px;  height: 30px;  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;  background-position: 95% 50%;  display: inline-block;  width: 250px;  border: 2px solid #666666;  overflow: hidden;  vertical-align: middle; //added}#topGroup {  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;  background-position: 95% 50%;  width: 280px;  border: none;  margin-top: 5px;  padding-left: 5px;  -webkit-appearance: none;}#topGroup option {  padding-left: 5px;}

<div class="customer_form">  <label for="topGroup">Category</label>  <div class="selectIcon">    <select id="topGroup">      <option>Item1</option>      <option>Item2</option>      <option>Item3</option>    </select>  </div></div>

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

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>

Vertically align label with input

If I get this right, You want the label and the input to vertically center align W.R.T each other and not the page. For that, there are couple of ways.

The Flexbox Way

If you want to use something new from the CSS world and be future ready, use flexbox. Example -

.fieldHeading {  width: 50px;}.fieldSpan {  overflow: hidden;}#field1 {  width: 150px;}/*flexbox approach.* height and background added for clarity.*/
#form {  height: 100px;  background: #bada55;  display: flex;  align-items: center;}

<div id="form">  <label for="field1" class="fieldHeading">Name </label>  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span></div>

How to align label and select in bootstrap?

I found a way to do it by using

display: inline-block;
vertical-align: middle;
float: none;

on every element. I also put them all in a column and had to make your select independent from label. You can see the result here. I hope it helps.

Vertical align of label next to a multiselect

With vertical-align you are able to position inline elements based on the other inline elements in the same line.

.control-label { 
    vertical-align: top; 
}

label and select are both display: inline by defaut.

CSS make label text align with select text

Add display: flex;
align-items: center; to .selectLabel will solve the issue

.select{   width:100%;   padding-left: 2%;   text-align: left;   margin: 10px auto 10px;   position: relative;}#select{    border: 1px solid #ccc;    font-size: 16px;    height: 34px;    width: 268px;    background-color: aqua;}.selectLabel{    clear: both;    float:left;    display:flex;    align-items: center;    height: 34px;    vertical-align: middle;    width: 268px;    line-height:25px;    background-color: aquamarine;}

<div class='select'>  <label class='selectLabel'>{this.props.label}</label>  <select id ='select'>    <option value="1">1</option>        <option value="2">2</option>  </select></div>

Align Label To Middle Off Drop Down Selector Box - Woocommerce

It's not aligned middle because of the clear button beside the select option that's why that element creating extra height.

You can do this in two way one is CSS and the Second is JavaScript

By CSS you can give this CSS position: absolute; to the clear button

CSS

.woocommerce div.product form.cart .reset_variations{position: absolute;}
.single_variation_wrap{margin-top: 25px;display: inline-block;}

By javascript, you can remove that element from beside select and
append new tr inside table and move an element in that td. Try
the below code. code will go active theme function.php file.

JavaScript

function add_custom_js(){
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        var reset_variations = jQuery('.variations').find('.reset_variations')[0].outerHTML;
        jQuery('.variations').find('.reset_variations').remove();
        jQuery('.variations tbody').append('<tr><td class="label"></td><td class="value">'+reset_variations+'</td></tr>');
        jQuery('.variations select').on('change',function(){
            var show = false;
            jQuery('.variations select').each(function(){
                if( jQuery(this).val() != '' ){
                    show = true;
                    return false;
                }
            });
            if( show ){
                jQuery('.reset_variations').css( 'visibility', 'visible' ).hide().fadeIn();
            }else{
                jQuery('.reset_variations').css( 'visibility', 'hidden' );
            }
        });
    });
    </script>
    <?php 
}

add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Tested and works

---

Related Topics