Question

在实施垂直居中方面遇到一些麻烦。似乎在Chrome和Safari中应该正常工作，但在Firefox中它很奇怪（我在Mac上调试）。

当调整浏览器大小时，悬停元素的大小不会调整大小以适合它的父级，当浏览器调整为原始宽度时，悬停元素的结尾太小。

参见this video 这是 demo。（Link到代码视图）

关于如何解决这个问题的任何想法？

Answer 1

最后，我能够通过这些变化解决这个问题希望它在未来可能派上用场（链接到答案底部的完整解决方案）。

原始标记

<article class="work-preview">
    <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
    <div class="covering background"></div>
    <div class="covering foreground">
            <h2>A Text</h2>
    </div>
</article>

新加价

<article class="work-preview">
        <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
        <div class="coveringcontainer">
            <div class="covering foreground">
                <h2>A Text</h2>
            </div>
        </div>
</article>

原创CSS

.covering {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}

body .work-preview:hover .covering {
    opacity: 1;
    filter:alpha(opacity=100);
    cursor: pointer;
}

新CSS

.coveringcontainer {
  position: absolute;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
}

.work-preview:hover .coveringcontainer {
  display: block;
  cursor: pointer;
}

.covering {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
}

这里是完整的solution！

Answer 2

尝试在

上使用inline-block;代替inline-table

body .work-preview

Answer 3

Firefox不考虑vertical-align:middle;，因为它仅在表格单元格上考虑。如果您需要更多信息，我建议您阅读Understanding Vertically Align。

容器中的垂直和水平居中文本没有固定大小在Firefox中表现得很奇怪

3 个答案: