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

从overflow: auto;

中删除.pImageContainer {}

我正在努力研究为什么会引起这个问题，但目前还不尽如人意。

那会解决它。

Answer 2

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

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

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

或者，您可以为.pImageContainer提供min-height值，以确保图片始终显示并居中于该区域内。

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

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

2 个答案: