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

大家早上好！表格单元不会垂直和水平对齐

我希望如果任何你的主人能够协助 - 我有一个网站，我正在建设一个已应用CSS“高度：100％”，并已被赋予“显示：表”属性。这个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>

你的时间和帮助将不胜感激。

此致

拜伦

来源

2014-02-12 IcedQuick

我相信我已经解决了水平对齐 - 似乎IFrame需要一个绝对宽度。对于垂直对齐，我已经解决了现在使用填充，但是正如你可以想象的，这对于不同的视图端口是非常不理想的 - 任何帮助都将不胜感激 – IcedQuick

iframe的高度为100％，所以它完全填充容器。如果你想把它置于中间，你的努力必须指向iframe的来源，而不是容器。 –

谢谢李斯特先生。我已经给IFrame添加了一个高度，但它仍然没有区别。我试图在此处将其隔离（http://jsfiddle.net/dngkC/），但仍然无效。任何想法为什么，当我添加高度时，它仍然不是垂直居中？如果您删除填充并使用Chrome或Firebug中的Inspect将高度添加到IFrame中，则可以看到没有任何反应。 – IcedQuick

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

来源

2014-10-04 08:05:31 IcedQuick

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

回答

相关问题