HTML 中 Label、DIV 和 Span 的垂直对齐方式答案

【问题标题】：vertical alignment for Label, DIV and Span in HTMLHTML 中 Label、DIV 和 Span 的垂直对齐方式
【发布时间】：2013-09-28 04:40:41
【问题描述】：

我正在使用第三方库，例如 Kendo，它们在渲染时会输出各种类型的 HTML 元素。

所以你最终可能会遇到这样的场景：

<ul>
    <li>
        <label>label text</label>
        <div>muli select widget</div>
        <span>date selector</span>
    </li>
</ul>

注意！假设我无法控制从这些小部件/第三方工具呈现的 HTML。

问题是上述场景的垂直对齐。我创建了一个 JSFiddle，它显示了标签如何垂直对齐不正确。见这里：

http://jsfiddle.net/tMJFF/

如何让这三个元素在垂直方向上完美对齐？

【问题讨论】：

Vertical align img and text inside <p>的可能重复

标签： html css

【解决方案1】：

在所有元素上使用 inline-block 属性

label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}

http://jsfiddle.net/6vQ4Q/

【讨论】：

【解决方案2】：

您提到了剑道，所以我建议使用他们装饰ul 的任何选择器并执行以下操作：

ul.kendo-selector-class-of-choice li * {
    vertical-align: middle;
    display : inline; /* for lte IE7 only */
}

由于您无法控制正在创建的元素，这可能会随着装饰客户端库（在本例中为 Kendo）的不同实现/版本更新而改变。 * 涵盖了这一点，虽然可以说是一个饥饿的选择器，但它的范围受到 .kendo-selector-class 的限制

以下内容适用于 Chrome 和 IE10，但 jsfiddle 对 IE8 的浏览器测试有点棘手，因为它本身无法正确呈现......但如果你做进一步测试，你会发现你必须使用类似的东西display:inline 如果你要去 IE7 的美丽土地-.

http://jsfiddle.net/tMJFF/11/

【讨论】：

【解决方案3】：

只需添加vertical-align:middle;

这里引用Fiddle

label {
    vertical-align:middle;
    line-height:20px;
    border:1px solid blue;
}
.div-input {
    vertical-align:middle;
    border:1px solid black;
    margin-right:20px;
    display:inline-block;
    height:20px;
    width:100px;
    box-model:collapse-box
}
.span-input {
    vertical-align:middle;
    border:1px solid black;
    display:inline-block;
    height:20px;
    width:100px;
}

【讨论】：

【解决方案4】：

label {
    line-height:20px;
    border:1px solid blue;
    vertical-align:top;
}

【讨论】：

【解决方案5】：

将 li 中的所有元素垂直对齐到中间。

ul li *{
    vertical-align:middle;
}

【讨论】：

【解决方案6】：

vertical-align css 属性垂直对齐您的标签，因此只需使用：

label,div,span{
    vertical-align :middle
}

DEMO

【讨论】：

谢谢，喜欢@Stephen，我会试试这个