كيفية محاذاة التسمية وتحديد المربع عموديا (وسط)

Question

بالنسبة لمعلمي كس هناك ، لا أستطيع معرفة كس الذي يجعل أول تسمية/حدد الزوج لا محاذاة الأوسط ، ولكن الثاني لا محاذاة في الوسط.

انظر المشكلة في الصورة أدناه.هدفي هو جعل أول تسمية / حدد الزوج محاذاة في الوسط وفهم قواعد كس التي تجعل ذلك يحدث.

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

تحديث جسفيدل

Answer 2

giveacodicetagpre.

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