跨浏览器垂直对齐图像 - Firefox 错误

Question

这很难解释，参见小提琴here。在 Chrome 中工作，而不是在 Firefox 中。

我需要在一个固定大小的容器中显示一些图像并将它们垂直对齐到中间。我遵循了这个问题（How to vertically align an image inside div）中给出的例子，效果很好。但是在我的标记中使用它在 Firefox 中不起作用。

根据图像的上下文，html 标记可能会略有不同：

例如：

工作：

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

不工作：

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

在 Firebug 中查看此内容，我可以看到 <span class="img-valign-helper"></span> 略微变灰 - 我不确定这意味着什么？

结果是图像与顶部垂直对齐。所以img-valign-helper 不起作用。但在 Chrome 中运行良好。我在我的 html 标记中看不到任何会导致它中断的东西。 css 也几乎相同。

这里出了什么问题？

Answer 1

您需要将height: 100%; 添加到您的.table-cell-50。这样它就可以通过高度到达您的辅助跨度。

Updated fidddle