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

Posted 2023-03-05

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

【英文标题】：Vertical and horizontal centering text in container with no fixed size acting weird in Firefox

【发布时间】：2013-03-24 10:13:59

【问题描述】：

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

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

见this video 这里是 demo。 （Link 代码查看）

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

【参考方案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！

【参考方案2】：

尝试使用inline-block; 代替inline-table

body .work-preview

【参考方案3】：

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