CODEWITHSUNDEEP
htmlcssiframealignment
mathinvalidnik
mathinvalidnik

Reputation: 1600

How to align iframe always in the center

I have an iframe surrounded by div element and I am simply trying to position it always in the center. here is my jsfiddle effort : jsfiddle

and trully believe that someone could help because I am sure that it is something really simple but I just can not see it.

Here is the HTML itself:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

Upvotes: 16

Views: 173691

Answers (8)

Maria Irini
Maria Irini

Reputation: 1

very simple HTML only way: no css no scripts

<center>
<iframe> your content </iframe>
</center>

example 2 frame center and text in the frame left or right e.c.t

<center>
<iframe align="left|right|middle|top|bottom"> your frame content </iframe>
</center>

to see all iframe parameters you can use a iframe generator https://superblogger3.blogspot.com/2023/03/iframe-generator.html

Upvotes: 0

Facundo Colombier
Facundo Colombier

Reputation: 3651

Center iframe

Edit: FLEX solution

Using display: flex on the <div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

JSFiddle: https://jsfiddle.net/h9gTm/867/

One solution is:

div {
  text-align:center;
  width:100%;
}
div > iframe{
  width: 200px;
}
<div>
  <iframe></iframe>
</div>

JSFiddle: https://jsfiddle.net/h9gTm/

edit: vertical align added

css:

div {
    text-align: center;
    width: 100%;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
}
div > iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

JSFiddle: https://jsfiddle.net/h9gTm/1/

Upvotes: 42

Coder
Coder

Reputation: 13

You could use CSS and add a container and a style to centre it

<style>
.container { 
  height: 75px;
  position: relative;
  border: none;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

After you paste this add a div to the iFrame and then it should look like this

<div class="container">
  <div class="center">
    <iframe src="embbeded form link here" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  </div>
</div>

Upvotes: 0

Jason C
Jason C

Reputation: 40335

If all you want to do is display an iframe on a page, the simplest solution I was able to come up with doesn't require divs or flex stuff is:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

And then the HTML is just:

<html>
  <body>
     <iframe ...></iframe>
  </body>
</html>

If this is all you need you don't need wrapper divs to do it. This works for text content and stuff, too.

Fiddle.

Also this looks even simpler.

Upvotes: 1

Philip
Philip

Reputation: 7166

Try this:

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}

Upvotes: 6

Prasanth K C
Prasanth K C

Reputation: 7332

First remove position:absolute of div#iframe-wrapper iframe, Remove position:fixed and all other css from div#iframe-wrapper

Then apply this css,

div#iframe-wrapper {
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

FIDDLE DEMO

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

You could easily use display:table to vertical-align content and text-align:center to horizontal align your iframe. http://jsfiddle.net/EnmD6/7/ 

html {
    display:table;
    height:100%;
    width:100%;
}
body {
    display:table-cell;
    vertical-align:middle;
}
#top-element {
    position:absolute;
    top:0;
    left:0;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    text-align:center;
}

version with table-row http://jsfiddle.net/EnmD6/9/ 

html {
    height:100%;
    width:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
    margin:0;
}
#top-element {
    display:table-row;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;
}

Upvotes: 0

atw
atw

Reputation: 5840

I think if you add margin: auto; to the div below it should work.

div#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 100%;
    width: 100%;
}

Upvotes: 4

Related Questions