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

Question

这很难解释，请参阅 fiddle 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

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

Vertically align images cross browser - Firefox bug

html

css

firefox

image

vertical-alignment