表格单元格不会垂直和水平对齐答案

【问题标题】：Table Cell won't align vertically and horizontally表格单元格不会垂直和水平对齐
【发布时间】：2014-02-12 04:53:22
【问题描述】：

大家早上好！

我希望各位大师能提供帮助 - 我正在构建的网站上有一个 div，它应用了“高度：100%”的 CSS 并被赋予了“显示：表格”属性.此 div 中还有另一个 div，带有“display: table-cell”和“vertical-align: middle”。但是，这段代码不是垂直居中吗？此外，我应用了“margin-left：auto”和“margin-right：auto”，但它也没有像它应该的那样水平居中 - 有什么想法吗？

我在页面上有 4 个动画，但我现在正在处理的动画只会显示在手机上，所以你要么需要使用它 (http://mobiletest.me/#d=iPhone_5_portrait&u=http://energyamplified.co.za/home.php) 要么制作确保您访问 (http://energyamplified.co.za/home.php) 时的视口在 227-449 像素宽范围内。

CSS：

#animation_wrapper {
height: 100%;
display: table;
}
@media only screen and (min-width: 227px) and (max-width: 449px) { /* Very Small Animation */
div #frameContainer_very_small {
display: table-cell;
vertical-align: middle;
padding-top: 25%;
margin-left: auto;
margin-right: auto;
}
div #frameContainer_very_small iframe {
width: 100%;
height: 100%;
display: block;
}
}

HTML/JS（在此视口中，网站其他地方的 css 加载 iframe“animation_very_small.html”：

<div id="animation_wrapper">                   
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"

var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"

var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>"

var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>"

}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>

我们将不胜感激您的时间和帮助。

亲切的问候，

拜伦

【问题讨论】：

我相信我已经解决了水平对齐问题 - 似乎 IFrame 需要一个绝对宽度。对于垂直对齐，我现在决定使用填充，但是您可以想象这在不同的视口上远非理想 - 任何对此的帮助仍将不胜感激
iframe 的高度为 100%，因此它完全填满了容器。如果你想把它放在中间，你的努力必须指向 iframe 的源，而不是容器。
谢谢李斯特先生。我已经为 IFrame 添加了一个设定的高度，但它仍然没有任何区别。我试图在这里隔离它（jsfiddle.net/dngkC），但它仍然不起作用。知道为什么，当我添加高度时，它仍然没有垂直居中？如果您删除填充，然后使用 Chrome 或 Firebug 中的 Inspect 将高度添加到 IFrame，您会看到没有任何反应。
好的，其他 div 之一引起了问题，在我按照建议添加高度后，它现在可以工作了。感谢您的指导，李斯特先生 - 如果您希望我为您标记，请随时添加此作为答案。

标签： javascript html css

【解决方案1】：

好的，其他 div 之一引起了问题，在我按照建议添加高度后，它现在可以工作了。感谢您的指导，Lister 先生 - 如果您希望我为您标记，请随时添加此作为答案。

【讨论】：