如何垂直对齐标签和选择框（中）

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>

您可以在此处查看此操作... Fiddle

Answer 1

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

Answer 2

一种简单的方法是为label元素提供一个等于下拉选择器高度的行高。但是，此解决方案取决于您的标签只是一行文字，如果您有任何多行标签，它将无法使用，您应该使用上面详述的vertical-align方法。

label {
    line-height:25px;
}

Updated JSFiddle

Answer 3

第一个div / label对周围还有select个，这会强制造成这种情况。

如果您删除第一个div / label对周围不必要的select并添加与第二个相同的类，那么您应该没问题

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

修改后的JSFiddle

Answer 4

尝试使用此垂直对齐修复：

/ * Vertical Align Fix * /

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

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

将类（.valign）提供给父级（包含select的div）

这个内部元素的另一个类（选择+标签）

看看它是否有效。

Answer 5

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