Question

大家早上好！

我希望你们的主人能够提供帮助 - 我在我正在建造的网站上有一个div，它已经应用了“身高：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）在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>

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

亲切的问候，

拜伦

Answer 1

好吧，其中一个div导致了一个问题，在我按照建议添加高度之后，它现在正在运行。感谢Lister先生的指示 - 如果您希望我为您做出标记，请随意添加此答案。

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

1 个答案: