How To Center iFrame? - html

Question

I have a client who is using blogspot and I've tried everything I know to try and center the iframe which holds the link. However, i just can't seem to get it to work. Here is the code I am using, and suggestions?
<section id="content">
<div class="ic"></div>
<div class="container_12">
<div class="wrapper">
<div class="newswrap">
<iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>

Answer 1

Try adding a display block to your Iframe and margin: 0 auto;
Or you can add to the Iframe a display: inline-block and to .newswrap{text-align: center;} but be sure that wrapper and newswrap have width: 100%
Then your code should be:
.wrapper{width: 100%;}
.newswrap{text-align: center;width: 100%;}
iframe{display:inline-block;}

Answer 2

iframe is inline element and you can do it via css adding text-aling:center; as in snippet below. But as you already have width:100% on Iframe, you probably have to align the container above the iframe using margin:0 auto; Also you structure has extra closing </DIV> which can be also an issue :
.newswrap {
text-align: center;
}
<section id="content">
<div class="ic"></div>
<div class="container_12">
<div class="wrapper">
<div class="newswrap">
<iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>

Answer 3

try this if you don't mind fixed width,also you can adjust the width
<style type="text/css">
iframe{
width: 800px!important;
margin:auto;
}
</style>