css - Forms: centering vertically -

at current project i've 1 problem in forms. possible, font-size of label in form higher default. if raise up, input on right side must centering vertically.

i took @ bootstrap , foundation, both hadn't solution problem.

<form action="" class="m-form">  <ol>    <li>      <label for="sample">a sample label</label>      <input type="text" id="sample" class="m-form__textfield" value="a sample input">    </li>  </ol> 

.m-form {   ol {     list-style: none;     margin: 0;     padding: 0;   }   label:first-child {     box-sizing: border-box;     display: block;     float: left;     padding: .25em 2em .25em 0;     width: 50%;      font-weight: bold;     line-height: 1.5;     text-align: right;   }   .m-form__textfield {     box-sizing: border-box;     float: left;     padding: .5em;     width: 50%;      border: 1px solid #ccc;     border-radius: 3px;   } } 

}

demo: http://jsfiddle.net/qsnh5/1/

do have simple solution it?

using vertical-align property

i made few changes css:

label:first-child {     box-sizing: border-box;     display: inline-block;     vertical-align: middle;     padding: .25em 2em .25em 0;     width: 40%;           font-weight: bold;     line-height: 1.5;     text-align: right; } .m-form__textfield {     box-sizing: border-box;     display: inline-block;     vertical-align: middle;     padding: .5em;     width: 50%;                    border: 1px solid #ccc;     border-radius: 3px; } 

instead of floating elements, try using display: inline-block , apply vertical-align: middle property.

be careful % width since 50% values can cause elements wrap around second line depending on other factors such padding, margin, borders , on.

demo: http://jsfiddle.net/audetwebdesign/ahzfm/