9

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.

enter image description here

<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

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
John Livermore
  • 30,235
  • 44
  • 126
  • 216
  • 1
    If the code is 'too large' then reduce it to the minimum necessary amount to reproduce your problem. Don't expect us to traipse around the internet to solve your problems for you, please read the '[MCVE](http://stackoverflow.com/help/MCVE/)' guidelines for more advice. You have greater than 3000 rep (as I write): you know better. – David Thomas Jun 04 '14 at 20:45
  • If you don't want to deal with a fixed line height then in your particular example, you can always make the container of the label and select display table-cell and set vertical align middle – Huangism Jun 04 '14 at 20:50
  • 1
    The code isn't too large as I see it. It is just the YUI Pure CSS. – Olaf Dietsche Jun 04 '14 at 20:55

5 Answers5

6
label, select {
    display: inline-block;
    vertical-align: middle;
}
aaronburrows
  • 994
  • 4
  • 16
6

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

APAD1
  • 13,509
  • 8
  • 43
  • 72
  • Only solution that worked for me to get the label to be aligned middle vertically against the select dropwdown box. Changed to 35px for me. I am on BootStrap 3.3.7 – MarcoZen Dec 10 '17 at 06:37
  • Oops - spoke too soon. Unfortunately with different monitors/resolutions, the problem persists. The label is not aligned properly woth the text in the select drop down box. – MarcoZen Dec 11 '17 at 09:01
1

You have additional divs around the first label/select pair, which force this behaviour.

If you remove the unnecessary divs around the first label/select pair and add the same class as in the second, you should be fine 

<div class="pure">
    <form class="pure-form-inline">
        <div class="pure-control-group">
            <label>Choose Project:</label>
            <select></select>
        </div>
        <div class="pure-control-group">
            <label>Choose Customer:</label>
            <select></select>
        </div>
    </form>
</div>

Modified JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
0

Try with this vertical align fix:

/* Vertical Align Fix */

.valign:before {
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.valign > * {
    display: inline-block;

}
.valign-m { vertical-align: middle; }

Give the class (.valign) to the parent (The div containing the select)

And this other class to the inner elements (select + label)

See if it works.

Gibson
  • 2,055
  • 2
  • 23
  • 48
0
.pure .pure-u {
    line-height:25px;
}
Abe Hendlish
  • 707
  • 5
  • 11