Search code examples
htmlcssimagefirefoxvertical-alignment

Vertically align images cross browser - Firefox bug

This is tricky to explain, see fiddle here. Works in Chrome, not in Firefox.

I need to display a number of images within a fixed sized container and vertically align them to the middle. I have followed the examples given in this question (How to vertically align an image inside div) which works great. But using this in my markup it is not working in Firefox.

Depending on the context of the image the html markup can be slightly different:

For example:

Working:

<div class="print-wrap">
    <ul>
        <li class="img">
            <span class="img-valign-helper"></span>
            <img class="ls img-valign" src="http://placehold.it/200x105">
        </li>
    </ul>
</div>

Not working:

    <div class="print-wrap has-size">
        <ul>
            <li class="img">
                <div class="table">
                    <div class="table-cell-50 img-wrap">
                        <span class="img-valign-helper"></span>
                        <img class="ls img-valign" src="http://placehold.it/200x105">
                    </div>
                    <div class="table-cell-50 info-wrap">content</div>
                </div>
            </li>
        </ul>
    </div>

Looking at this in Firebug I can see the <span class="img-valign-helper"></span> is slightly greyed out - I am not sure what this means?

enter image description here

The result is the image is vertically aligned to the top. So the img-valign-helper is not working. Yet works fine in Chrome. I do not see anything in my html markup which would cause this to break. The css is almost identical too.

What is going wrong here?

Solution

  • You need to add height: 100%; to your .table-cell-50. That way it can pass through the height to your helper span.

    Updated fidddle