如何垂直对齐标签和选择框（中间） 对于CSS Guuru，我无法计算出第一个标签/选择对不是中间对齐的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>

选择项目：
选择客户：

---

在这里，您可以看到此操作…

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

/*垂直对齐固定*/

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

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

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

并将另一个类添加到内部元素（选择+标签）

---

查看它是否有效。

一个简单的方法是为

标签

元素提供一个与下拉选择器高度相等的行高度。但是，此解决方案取决于您的标签仅为单行文本，如果您有任何多行标签，则此解决方案将不起作用，您应使用上文详述的

垂直对齐

方法

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

label {
    line-height:25px;
}

---

在第一个

标签

/

选择

对周围有额外的

div

s，强制执行此行为

如果删除第一个

标签周围不必要的
div
s

/

选择
对，并添加与第二个标签相同的类，就可以了

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


选择项目：
选择客户：

修改
如果代码“太大”，则将其减少到再现问题所需的最小数量。不要指望我们通过互联网为您解决问题，请阅读“”指南以获取更多建议。你有超过3000个rep（正如我写的）：你更清楚。如果你不想处理固定的行高度，那么在你的特定示例中，你可以始终制作标签的容器，选择显示表格单元格并设置垂直对齐中间。代码并不像我看到的那样大。它只是YUI纯CSS。不需要
垂直对齐：中间
在此解决方案中。唯一对我有效的解决方案是使标签与选择下拉框垂直居中对齐。为我改成35像素。我在BootStrap 3.3.7Oops上-说话太早了。不幸的是，对于不同的监视器/分辨率，问题仍然存在。标签未与“选择”下拉框中的文本正确对齐。
<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>