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

Question

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

所以，这就是我所拥有的： DEMO

基本上它是一个行列表：

<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，或删除白色 space 并且没有任何改变。

Answer 1

也许您可以尝试将属性 display: table; 设置为 <label> 元素，将 display:table-cell; 设置为您的 <span> 元素。此修复元素显示为 <table> html 元素。正确修复 padding 和 margin 显示即可。

DEMO

Answer 2

这似乎与 line-height 有关——不知何故它使伪元素占用了额外的 space。您可以通过为 label 和 li 设置 line-height:0，然后再次为 .product-row-price 设置 line-height:1 来稍微减轻影响……但这仍然没有'看起来那么好，它仍然在底部留下一些space。（较低的行高会使 .product-row-price 中的文本重叠。）

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

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

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

仅供参考：span 中的 div 无效 HTML – 因此您应该将 .product-row-price 内的那些 div 替换为 span 并使它们成为块。

不过还是不太好看，因为第一列和第三列内容的宽度不同导致整个内容看起来不均匀，所以第二列内容没有水平对齐。（尽管可以避免为第一列和最后一列设置宽度，但如果您对第三列中“较短”值右侧的一点 space 没问题 – 像这样：http://jsfiddle.net/db0onh6c/8/)

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

Vertically align justified inline-block elements inside a container

html

css

text-align

vertical-alignment