CODEWITHSUNDEEP
htmlcssiframealignmentcenter-align
Misha Moroshko
Misha Moroshko

Reputation: 171341

How to center an iframe horizontally?

Consider the following example: (live demo)

HTML:

<div>div</div>
<iframe></iframe>

CSS:

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

Result:

enter image description here

Why the iframe is not centrally aligned like the div? How could I centrally align it?

Upvotes: 323

Views: 737564

Answers (14)

Ryan
Ryan

Reputation: 11

I used

iframe {
    align-items: center;
    margin: auto;
}

to put the iframe div in the center, as well as to center the items inside the iframe.

Upvotes: 1

rpmathur 12
rpmathur 12

Reputation: 55

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

use it and embed facebook in iframe in center of html page

Upvotes: 2

aljaz-code
aljaz-code

Reputation: 233

My simplest solution to this.

iframe {
    margin:auto;
    display:block;
}

Upvotes: 14

GorvGoyl
GorvGoyl

Reputation: 49220

If you can't access the iFrame class then add below css to wrapper div.

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

Upvotes: 7

Alohci
Alohci

Reputation: 82986

Add display:block; to your iframe css.

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>

Upvotes: 498

Nezir
Nezir

Reputation: 6915

In my case solution was on iframe class adding:

    display: block;
    margin-right: auto;
    margin-left: auto;

Upvotes: 4

Manthan Patel
Manthan Patel

Reputation: 1852

Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally. Give me THUMBS UP VOTE if you like.👍⯅.

style > img & iframe > this is your tag name so change that if you're want any other tag in center

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

Upvotes: 0

Kael
Kael

Reputation: 71

You can try 

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

I hope its useful for you

link

Upvotes: 5

Tushar Soni
Tushar Soni

Reputation: 211

The simplest code to align the iframe element:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

Upvotes: 19

Sonal Khunt
Sonal Khunt

Reputation: 1894

You can put iframe inside a <div>

<div>
    <iframe></iframe>
</div>

It works because it is now inside a block element.

Upvotes: 5

pedro
pedro

Reputation: 861

best way and more simple to center an iframe on your webpage is :

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

where width and height will be the size of your iframe in your html page.

Upvotes: 82

Nohl
Nohl

Reputation: 329

If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video

Depending on the video source and if you want to have old videos become responsive your tactics will need to change.

If this is your first video, here is a simple solution:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

And add this css:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Disclaimer: none of this is my code, but I've tested it and was happy with the results.

Upvotes: 14

boussac
boussac

Reputation: 125

According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:

margin-left: auto;margin-right: auto;

Upvotes: 3

mgraph
mgraph

Reputation: 15338

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

Upvotes: 22

Related Questions