javascript - 表格单元格不会垂直和水平对齐

Question

大家早上好!

我希望各位高手能够提供帮助 - 我正在构建的网站上有一个 div，它应用了“height: 100%”的 CSS 并被赋予了“display: table”属性.此 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) 时的视口(viewport)宽度在 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(在此视口(viewport)中，网站其他地方的 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>

非常感谢您的时间和帮助。

亲切的问候，

拜伦

Answer 1

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