Firefox中未顯示絕對居中的圖像

Question

這是我建立的第一個綜合站點，因此，如果我遺漏任何明顯的內容，我深表歉意。

我正在嘗試在高度也可變的容器中垂直和水平居中放置高度和寬度可變的圖像。 這樣，客戶就可以替換圖像或更改相鄰div中的內容，從而最終控制高度。

我使用的是本文及其介紹的其他文章中所述的絕對居中。

它在Chrome和Safari中可以很好地工作，但是Firefox不顯示圖像。 經過無休止的修補和查找問題之后，我舉起了手。 我知道垂直居中還有其他解決方案，但這似乎是唯一可以處理大多數涉及元素變化的解決方案。

任何建議的css / html更改，以使這項工作將不勝感激。 發生這種情況的實際位置在這里 。

<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

消除overflow: auto; 來自.pImageContainer {}

我正在嘗試研究導致問題的原因，但目前還很短。

那會解決的。

Answer 2

在Firefox中，錯誤發生在.pImageContainer上， height: 100% ， overflow: auto 。 因為里面的項目是position: absolute ，所以容器正在折疊到0高度，並且該項目是隱藏的。

消除overflow: auto只允許看到圖像，但是容器的高度不正確，因此為什么實際上並未居中。

如果您在任何容器上聲明一個固定的高度（例如250px ），則它可以正常工作，因為height: 100%則具有正確的值。

另外，您可以給.pImageContainer一個min-height值，以確保圖像始終顯示在該區域內並居中。

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