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

前端之家收集整理的这篇文章主要介绍了css – 如何垂直对齐标签和选择框(中)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于那里的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

解决方法

一种简单的方法是为标签元素提供一个等于下拉选择器高度的行高.但是,此解决方案取决于您的标签只是一行文本,如果您有任何多行标签,它将无法工作,您应该使用上面详述的vertical-align方法.
label {
    line-height:25px;
}

Updated JSFiddle

猜你在找的CSS相关文章