如何垂直对齐标签并选择框(中间) [英] How to align label and select box vertically (middle)

问题描述

对于那里的CSS专家，我无法弄清楚使第一个标签/选择对不在中间对齐的CSS，而第二个在中间对齐.

For the CSS gurus out there, I cannot figure out the css that makes the first label/select pair not middle align, but the second one does align in the middle.

在下图中查看问题.我的目标是使第一个标签/选择对在中间对齐，并了解使其成为现实的css规则.

See the problem in the image below. My goal is to make the first label/select pair align in the middle and to understand the css rules that make it happen.

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

您可以在这里看到实际操作... 小提琴

Here is where you can see this in action...Fiddle

推荐答案

一种简单的方法是使 label 元素的行高等于下拉选择器的高度.但是，此解决方案取决于您的标签仅是一行文本，如果您有多行标签，则该标签将不起作用，您应使用上面详细介绍的 vertical-align 方法.

An easy way to do this is to give the label elements a line-height equal to that of the height of the dropdown selector. However, this solution depends on your labels only being a single line of text, if you have any labels that are multi-line it will not work and you should use the vertical-align method detailed above.

label {
    line-height:25px;
}

更新了JSFiddle

这篇关于如何垂直对齐标签并选择框(中间)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！