레이블과 선택 상자를 수직으로 정렬하는 방법(가운데)

Question

CSS 전문가의 경우 첫 번째 레이블/선택 쌍을 중간 정렬이 아닌 만드는 CSS를 알아낼 수 없지만 두 번째 레이블은 중간에 정렬됩니다.

아래 이미지에서 문제를 확인하세요.내 목표는 첫 번째 레이블/선택 쌍을 중간에 정렬하고 이를 구현하는 CSS 규칙을 이해하는 것입니다.

<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>

여기에서 실제 동작을 볼 수 있습니다.깡깡이

Answer 1

이를 수행하는 쉬운 방법은 label 요소는 드롭다운 선택기의 높이와 동일한 줄 높이입니다.그러나 이 솔루션은 레이블이 한 줄의 텍스트여야만 합니다. 여러 줄의 레이블이 있는 경우 작동하지 않으며 다음을 사용해야 합니다. vertical-align 위에 자세히 설명된 방법.

label {
    line-height:25px;
}

업데이트된 JSFiddle

Answer 2

label, select {
    display: inline-block;
    vertical-align: middle;
}

.

Answer 3

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

Answer 4

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.

Answer 5

.pure .pure-u {
    line-height:25px;
}