css - 如何垂直对齐标签和选择框(中)

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 元素一个 line-height 等于下拉选择器的高度。但是，此解决方案取决于您的标签仅为单行文本，如果您有任何多行标签，则该解决方案将不起作用，您应该使用上面详述的 vertical-align 方法。

label {
    line-height:25px;
}

Updated JSFiddle