我希望#Demo-iFrame
在其父div #Demo-Card
中垂直对齐。如果有人能帮我解决这个问题,我会非常感激!
HTML 的
<div id="Demo-Pane" class="row-fluid no-lr-padding">
<div id="Demo-Card">
<div class="problem-header">
<h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3>
</div>
<!--<button id="Run">Run Demo</button>-->
<iframe id="Demo-iFrame" src="mathsynthesis/LearningByExample/GUI/web/mathsynth.html">
<p>Your browswer does not support iFrames</p>
</iframe>
</div>
</div>
CSS
#Demo-Pane {
background-color: #86E1D8;
height: 90vh;
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#Demo-Card {
background-color: white;
width: 95%;
height: 80vh;
display: table;
/*margin: 0 auto;*/
overflow: hidden;
}
#Demo-Card iframe {
display: block;
margin: 0 auto;
height: 130%;
width: 95%;
zoom: 1;
-ms-transform: scale(0.70);
-moz-transform: scale(0.70);
-o-transform: scale(0.70);
-webkit-transform: scale(0.70);
transform: scale(0.70);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
答案 0 :(得分:1)
删除这些样式,它将居中。
-ms-transform: scale(0.70);
-moz-transform: scale(0.70);
-o-transform: scale(0.70);
-webkit-transform: scale(0.70);
transform: scale(0.70);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
答案 1 :(得分:1)
查看以下标记和样式。
框(iframe)总是完全居中。
HTML
<html>
<body>
<div class="main-content">
<div class="header">
<h3>11 Problem</h3>
</div>
<div class="iframe-container">
<div class="iframe">
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
<p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
}
.main-content {
border: 15px solid green;
width: calc(100vw - 30px);
height: calc(100vh - 30px);
}
.header {
margin-left: 15px;
h3 {
font-size: 1.5em;
}
}
.iframe-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -3.7em; // compensate for heading margin.
}
.iframe {
width: 50%;
height: 50%;
background-color: #ccc;
overflow: scroll;
p {
width: 90%;
margin: 20px auto;
}
}