15ongm 15ongm - 4 months ago 30
HTML Question

How to horizontally align iFrame div within parent?

What is happening



enter image description here

What I want



enter image description here

I would like the
#Demo-iFrame
to be vertically aligned in its parent div
#Demo-Card
. If anyone could help me out with this, I would be quite appreciative!

Code



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;
}


JSFiddle

Answer

Remove these styles and it will center.

-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;