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

Question

I know that this questions has been asked several times, but I couldn't find a solution for this specific situation.

So, here's what I have: DEMO

Basically it's a list of rows:

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

And the span elements are all inline-blocks and label has text-align: justify .

Everything works as expected, and as I want it to, but the vertical alignment. All the items are attached to the top, kind of. I thought it was the usual inline-block annoyance of the empty line afterward, but I tried setting the font-size to 0, or removing the white space and nothing changed.

Answer 1

This seems to have to do with the line-height – somehow it makes that pseudo element take up additional space. You can mitigate the effects a little bit by setting line-height:0 for the label and the li , and then a line-height:1 for .product-row-price again … but that still doesn't look that good, it still leaves some space at the bottom. (And a lower line-height will make the text in .product-row-price overlap.)

I think a better solution would be a negative margin-bottom for the label, and overflow set to hidden:

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

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

FYI: div in span is invalid HTML – so you should replace those divs inside of .product-row-price with spans and make them block.

Still doesn't look to pretty though, because the different widths of the content in the first and third column makes the whole thing look uneven, so the content in the second column doesn't align horizontally. (Although with a set width for the first and last column that could be avoided, if you're ok with a little space at the right of the “shorter” values in the third column – something like this: http://jsfiddle.net/db0onh6c/8/ )

Answer 2

Maybe you could try to set property display: table; to <label> elements and display:table-cell; to your <span> elements. This fix element to display as a <table> html element. Just fix padding and margin display properly.

DEMO