How to center an iframe?

Asked

Viewed 11,060 times

3

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 the same 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 put the animation at the beginning to load the page at the bottom and when it closes pull the page up with the above mentioned script

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

<div id="conteudo1">...
css iframe animation

2 answers

3

already got it, for want I just added a align center in div and Middle in 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>

1

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

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

Then to correct just change the wrong attribute algin: center; for 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 display: block; (for his setTimeout) then you don’t need the text-align: center; in the parent element, simply add margin: 0 auto; in 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>

Browser other questions tagged css iframe animation

You are not signed in. Login or sign up in order to post.