How to center an iframe horizontally?
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>
How to align an iframe horizontally (in the centre of the screen) with CSS?
You must set the margin of your #box-logo iframe
to 0 auto
.
This is because you have the element with the display
property set to block
, so it takes the entire line. As you set the width
to determinate amount of px
there is some free space in the line. Setting margin: 0 auto
you are indicating that free space must divide equally to each side of the div
.
In the case you have the iframe
display
property set to inline
or inline-block
this wouldn't work. To get the div
centered, in that situation, you should apply text-align: center
to #box-logo
Here you have a fiddle:
https://jsfiddle.net/g2s384L2/
Center an iframe horizontally
The issue is that your iframes are wider than 200px (the fixed width you've defined for their centered containing div). This will cause their excess width to spill over the right boundry of the div.
Depending on the full structure of your site try putting the auto margin directly on the iframes.
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
Demo: http://jsfiddle.net/NvfKu/
How to center iframe horizontally when there's a vertical scroll bar?
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that?
body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div>
within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe>
to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%;
to width: 900px;
.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.
Can't center iframe HTML
Include the iframe in a div with align="center"
like this:
<body>
<div align="center">
<iframe height="200" width="800" src="http://www...." frameborder="0"></iframe>
</div>
</body>
Check on this JSFiddle that it is on the center.
UPDATE
As Quentin has mentioned in his comment bellow, the use of align="center"
is obsolete in HTML5. As an alternative you can use style="text-align:center"
like this:
<div style="text-align:center">
<iframe height="200" width="200" src="http://www...." frameborder="1"></iframe>
</div>
Check this updated JSFiddle.
How do I center an iframe?
http://codepen.io/mlegg10/pen/zqLdJy
change the css padding-top and bottom to suit your needs
/* Flexible iFrame */
.Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}.Flexible-container iframe,.Flexible-container object,.Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
<!-- Responsive iFrame --><div class="flexible-container"> <object width="100%" data=""https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"&toolbar=0&navpanes=0" type="application/pdf"> <embed width="100%" type="application/pdf" src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"?scrollbar=0&toolbar=0&navpanes=0"> </object></div>
Related Topics
Is Using <Li> Without Enclosing <Ul> Tags Dangerous
Heading with Horizontal Line on Either Side
How to Extract Url and Link Text from HTML in Perl
Css3 Scale - Prevent from Scalling Text
How to Trigger a Phone Call When Clicking a Link in a Web Page on Mobile Phone
Giving a Border to an HTML Table Row, <Tr>
How to Escape HTML in Node.Js Ejs View
Equalize the Height of Left and Right Div, Prevent Right Div from Going Below Left Div
Extracting Svg from Font Awesome
How to Bevel the Corner of a Block Div
Img Tag Displays Wrong Orientation
Input Type Datetime - Value Format
How to Change the Color of <Div> Element Depending on Its Height or Width
How to Create a Hidden Div That Doesn't Create a Line Break or Horizontal Space
Disable Form Autofill in Chrome Without Disabling Autocomplete