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

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

1 个答案: