1

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?

Community
  • 1
  • 1
user3065931
  • 531
  • 7
  • 20

1 Answers1

4

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

woestijnrog
  • 1,549
  • 12
  • 9
  • Can't believe I missed that. Looking in the inspector I could see its height was the full height of the container so didn't think I needed to define it explicitly. Any ideas why this worked in Chrome then? – user3065931 Nov 03 '15 at 11:26
  • I only know Chrome and FF don't implement percentage heights exactly alike. Especially when you need to pass on the height through a div. – woestijnrog Nov 03 '15 at 11:42