在容器内垂直对齐对齐的内联块元素

Question

我知道这个问题已经问过几次了，但是我找不到针对这种特定情况的解决方案。

所以，这就是我所拥有的： 演示

基本上是一个行列表：

<ul>
    <li>
        <label>
            <span>element1</span>
            <span>element2</span>
            <span>element3</span>
            <span>element4</span>
        </label>
    </li>
    <li>
        <label>
            <span>element1</span>
            <span>element2</span>
            <span>element3</span>
            <span>element4</span>
        </label>
    </li>
</ul>

并且span元素都是inline-blocks并且label具有text-align: justify 。

一切都按预期进行，但按我的意愿进行，但垂直对齐。 所有项目都附在顶部，有点像。 我以为这是空行之后常见的行内嵌块烦恼，但我尝试将font-size设置为0，或删除了空白，但没有任何变化。

Answer 1

这似乎与line-height –某种程度上使伪元素占用了额外的空间。 您可以通过为label和li设置line-height:0 ，然后为.product-row-price再次设置line-height:1来稍微减轻影响，但是看起来还是不太好，仍然在底部留有一些空间。 （较低的行高将使.product-row-price的文本重叠。）

我认为更好的解决方案是将标签的底边距设为负底边，并将溢出设置为隐藏：

.product-row-label {
    margin-bottom: -1.5em;
    overflow: hidden;
    /* rest of existing styles */
}

http://jsfiddle.net/db0onh6c/7/

仅供参考： div中的span是无效的HTML –因此，您应将.product-row-price内的div替换为span并将其阻止。

不过，看起来还是不够漂亮，因为第一列和第三列中内容的宽度不同，使整个内容看起来很不均匀，因此第二列中的内容没有水平对齐。 （尽管可以避免为第一列和最后一列设置宽度，但如果可以的话，请在第三列的“较短”值的右边留一点空格-像这样： http：// jsfiddle。网路/ db0onh6c / 8 / ）

Answer 2

也许您可以尝试设置属性display: table; 到<label>元素并display:table-cell; 您的<span>元素。 此修订元素显示为<table> html元素。 只需正确修复填充和边距显示即可。

DEMO