绝对居中图像未在 Firefox 中显示

Question

这是我建立的第一个综合网站，如果我遗漏了任何明显的内容，我深表歉意。

我正在尝试将高度和宽度可变的图像垂直和水平居中放在一个高度可变的容器中。这样客户端可以替换图像或更改最终控制高度的相邻 div 中的内容。

我正在使用绝对居中，在 this article 以及它引用的其他内容中进行了描述。

它在 Chrome 和 Safari 中运行良好，但 Firefox 不显示图像。在无休止的修补和寻找问题之后，我举手了。我知道垂直居中还有其他解决方案，但这似乎是唯一可以处理所涉及的大多数元素的可变性的解决方案。

非常感谢任何建议的 css/html 更改以使其工作。发生这种情况的实际站点是here。

<div class="partner_section">
        <div class="partner_details">
            <div class="span_2 float-right">
                <h4>Heading</h4>
                    <p>content</p>
                <h4>Heading</h4>
                    <p>Content</p>
                <div class="partner_cta">
                    <a href="/canvas-shoes/black/">CTA</a>
                </div>
            </div>
            <div class="span_2 float-left pImageContainer">
                <a href="http://springboardcollaborative.org/"><img class="" alt="SpringBoard Logo" src="/templates/__custom/images/custom/sblogo.png"></a>
                </div>
            </div>
        </div>
</div>

---

 .partner_section {
   width: 100%;
   overflow: hidden;
   position: relative;
   padding: 40px 0 40px 0;
   z-index: 100;
 }

 .partner_details {
   overflow: auto;
   width: 980px;
   margin: auto;
   position: relative;
   height: 100%;
   display: table;
  }

 .pImageContainer {
   height: 100%;
   overflow: auto;
   text-align: center;
   position: relative;
  }

 .pImageContainer img {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   margin: auto;
 }

 .span_2 {
    width: 49%;
 }

 .float-right {
    float: right;
 }

 .float-left {
    float: left;
 }

Answer 1

在 Firefox 中，错误在于 height: 100% 和 overflow: auto 上的 .pImageContainer。因为里面的项目是position: absolute，所以容器正在折叠到0高度并且项目被隐藏了。

删除overflow: auto 只允许看到图像，但容器的高度不正确，因此它实际上没有居中。

如果您在任何容器上声明一个固定高度（例如250px），那么它可以正常工作，因为height: 100% 具有正确的值。

或者，您可以为.pImageContainer 指定min-height 值，以确保图像始终在该区域内显示并居中。

示例： http://codepen.io/shshaw/pen/lFbHs

Answer 2

从.pImageContainer {} 中删除overflow: auto;

我正在尝试研究导致问题的原因，但目前还不够。

这会解决它。