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:
Why the iframe is not centrally aligned like the div? How could I centrally align it?
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>
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.
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;
}
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
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.
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
link
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>
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
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;
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>
<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
Using $xpath = new DOMXpath($doc) by no means I could not get div (and its children) if it is placed under anchor.
In XPath:
html[1]/body[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/a[1]/div[1]/div[2]/div[1]/div[2]/img[1]
I evaluated elements one by one starting from body and when I reached the anchor it was the last tag in XPath that could be read.
I know this is not the best practice to place block elements into anchors but this html page is not mine and I cannot modify it.
Please advise if there is any trick to get it?
.....<div class="main-image">
<a title="" style="outline-style: none; text-decoration: none;" class="jqzoom" rel="gallery1" data-active="1" href="files/product/images/239_image_raw.jpg">
<div class="zoomPad">
<img style="opacity: 1;" title="" src="files/product/images/239_image.jpg" alt="ABSOLUTE SUMMER 8 VITA BASSA" height="320" width="240">
<div style="top: 97.6167px; left: 80px; width: 148px; height: 153px; position: absolute; border-width: 1px; display: none;" class="zoomPup"></div>
<div style="position: absolute; z-index: 5001; left: 239px; top: 0px; display: none;" class="zoomWindow">
<div style="width: 312px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div>
<div style="width: 100%; height: 320px;" class="zoomWrapperImage">
<img src="files/product/images/239_image_raw.jpg" style="position: absolute; border: 0px none; display: block; left: -169.782px; top: -206.257px;">.....
I will answer to myself :)
I took xpath from google chrome, but I did not take into account that what you see in browser is not necessary to be the same with html source as the browser shows content after javascript processing.
......
I have created Multifield dialog i AEM 5.6.1 and wold like to know How do I make an AEM CQ5 component responsive? fit to different devices/screens based on users viewpoint??
Better way for responsive design is CSS3 #media Rule.
In the following snippet menu for devices with width < 500 will be 100% width of screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
width: 100%;
}
h1{
font-size: 1.625em;
}
h2{
font-size: 1.375em;
}
.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.0661157024793388429752066115702%;
}
.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}
.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.481781376518218623481781376518%;
}
.gridmain {
width: 48.987854251012145748987854251012%;
}
.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
#media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1.0121457489878542510121457489879%;
}
.gridright {
width: 100%;
}
.right {
padding: 1.0121457489878542510121457489879%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">The Drive</div>
<div class="menuitem">The Walk</div>
<div class="menuitem">The Return</div>
<div class="menuitem">The End</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="http://www.w3schools.com/cssref/pulpitrock.jpg" alt="Pulpit rock" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
See more in fo in the following page
I ran the MapQuest sample code:
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:10, /*initial zoom level of the map*/
latLng:{lat:39.743943, lng:-105.020089}, /*center of map in latitude/longitude */
mtype:'map', /*map type (map)*/
bestFitMargin:0, /*margin offset from the map viewport when applying a bestfit on shapes*/
zoomOnDoubleClick:true /*zoom in when double-clicking on map*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
});
and generated a map ok. But looking at the HTML generated, it's not clear what the source of the map data is. I was expecting maybe an iFrame, or an image but I don't see either:
<div id="map" style="width: 800px; height: 300px; position: relative;">
<div style="width: 800px; height: 300px; z-index: 0; overflow: hidden; background: none repeat scroll 0% 0% rgb(255, 255, 255); position: relative; top: 0px; left: 0px; cursor: -moz-grab;">
<div class="mqa-display" style="position: absolute; z-index: 0;">
<div class="mqa-zl mqa-zl100 mqa-zlf" style="position: absolute; z-index: 100; cursor: default;">
<div class="mqa-zl mqa-zl0 mqa-zlgl" style="position: absolute; z-index: 0; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl10 mqa-zlf" style="position: absolute; z-index: 22;">
<div class="mqa-zl mqa-zl1000 mqa-zlf" style="position: absolute; z-index: 1000;">
<div class="mqa-zl mqa-zl1000 mqa-zlgl" style="position: absolute; z-index: 1000; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl5 mqa-zlgl" style="position: absolute; z-index: 5; left: 400px; top: 150px;">
</div>
</div>
</div>
How does that HTML represent a detailed map of Colorado?
Thanks
The map that you see generated by the JavaScript API is created by a set of map image tiles that are downloaded and assembled to create the map. Additional tiles are downloaded as the user pans and zooms in/out.
The map tiles are cached and hosted from various servers located around the world.
I need to hide 300px from the top in an iframe. I have tried to hide it with overflow: hidden in css, but it's not working in an iphone or an ipad. How can I solve that?
My HTML-code
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://my_url" width="940" height="900" frameborder="0" scrolling="no" </iframe>
</div>
</div>
My CSS
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 940px;
height: 600px;
}
.iframe-content {
position: absolute;
top: -300px;
}
I've made a demo from your code and along with my suggestion it seems to be working:
html:
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://www.google.com" width="400" height="500" frameborder="0" scrolling="no"/>
</div>
</div>
css:
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 300px;
border: 5px solid orange;
margin: 20px;
background: red;
}
.iframe-content {
position: absolute;
top: -300px;
}
iframe { background: blue; }
Demo - http://jsfiddle.net/MteRS/
I changed the widths/heights so it would fit into the jsfiddle output panel a bit better.