How to center an iframe?

Question

How to center an iframe?

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

You have on my page an animated banner that I made in Google Web Designer that I incremented in my site to appear before loading the index page. So far so good, the codes are working but I would like to know how I could center it on the page, preferably interactively, because it appears in the upper left corner and I could not centralize it. the codes I'm using are these:

<style>
#conteudo1{ display:none; }
.asd {
display: nome;
background: black;
border: none;
height: 450px;
width: 900px;
align: center;
}
</style>

<script>
window.onload = function(){
document.getElementById('conteudo1').style.display = "block";
setTimeout(function() {
  document.getElementById('carregando').style.display = "none";
}, 0000);
}
</script>

and on the page I placed the animation at the beginning to load the page below and when it close pull the page up with the script quoted above

<body>
<div id="carregando" class="center">
<iframe class="asd" align="top" src="CSS/animation/index/index.html"></iframe>
</div>

<div id="conteudo1">...

css iframe

asked by anonymous 28.09.2016 / 22:33

2 answers

Problem with facebook API How to remove the UNIQUE KEY attribute from a column in MySQL?

score 3 · Answer 1

I already got it, so I just added an align center in the div and middle in the iframe like this:

<div id="carregando" class="center" align="center">
<br><br><iframe class="asd" src="CSS/animation/index/index.html" align="middle"></iframe>
</div>

score 1 · Answer 2

The <iframe> element is natively inline-block , at least in modern browsers, older ones (old like IE6, etc.) should probably be inline , however being inline-block or inline both are aligned using text-align: center; is added to the "parent" element.

You have used algin: center; , this does not exist, another note is that align="center" can work but is considered obsolete:

link
link

Then to correct, just change the wrong attribute algin: center; by text-algin: center; :

.container {
    text-align: center;
}
.container > iframe {
    background: black;
    border: none;
    height: 450px;
    width: 900px;
}

<div class="container">
    <iframe src=""></iframe>
</div>

However, if the iframe is with display: block; (by its setTimeout ) then you do not need the text-align: center; in the parent element, just add margin: 0 auto; in the iframe:

.asd {
    background: black;
    border: none;
    height: 450px;
    width: 900px;
    margin: 0 auto; /* alinha o iframe */
    display: none;
}

<div id="carregando">carregando...</div>
<iframe class="asd" id="conteudo1" src=""></iframe>

<script>

setTimeout(function() {
   document.getElementById('conteudo1').style.display = "block";
   document.getElementById('carregando').style.display = "none";
}, 1000);
</script>