How to align label and select box vertically (middle)
css, yui-pure-css
Solution
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
Problem
For the CSS gurus out there, I cannot figure out the css that makes the first label/select pair not middle align, but the second one does align in the middle. See the problem in the image below. My goal is to make the first label/select pair align in the middle and to understand the css rules that make it happen. ``` <div class="pure"> <form class="pure-form-inline"> <div class="pure-g"> <div class="pure-u labelArea"> <label>Choose Project:</label> </div> <div class="pure-u-1-4"> <select></select> </div> </div> <div class="pure-control-group"> <label>Choose Customer:</label> <select></select> </div> </form> </div> ``` Here is where you can see this in action...Fiddle