2

在实现垂直居中时遇到一些麻烦。似乎在 Chrome 和 Safari 中正常工作，但在 Firefox 中它的行为很奇怪（我在 Mac 上调试）。

当浏览器调整大小时，悬停元素的大小不会调整到适合其父级的大小，而当浏览器调整到原始宽度时，悬停元素最终会变得太小。

观看此视频
这是 演示。（链接到代码视图）

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

4

3 回答 3

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%;
}



这是完整的解决方案！

于 2013-04-05T10:02:35.833 回答
0

尝试使用inline-block;而不是inline-tableon

body .work-preview
于 2013-04-02T23:10:31.740 回答
0

Firefox 不考虑vertical-align:middle;，因为它只在表格单元格上考虑。如果您想了解更多信息，我建议您阅读理解垂直对齐。

于 2013-04-03T21:09:20.253 回答