centering IFrame inside div in centering position screen
Question
i want to center iframe inside div in the center of screen how can i make it ,i don't know if missing something to add any one can help me please .i try to add margin :0 auto to #iframe but no worked yet what i need to do it .
<head> <title></title> <link href="menu.css" rel="stylesheet" type="text/css" /> <script src="script/jquery-1.11.1.min.js"></script> <style> #div1{ margin-left:auto; margin-right:auto; overflow-x: hidden; width:100%; height:1000px; } #iframe{ width: 60%; height: 1000px; background: #FFFFFF; } </style> </head> <body> <div style="margin-left:auto;margin-right:auto"> <ul class="dropdown"> <li class="drop"> <a href="#">About us</a> </li> <li class="drop"> <a href="#">Contact us</a> </li> <li class="drop"> <a href="#">Services</a> </li> <li> <a href="#">Address</a> </li> </ul> </div> <div style="width:auto;margin:0 auto;"> <div id="div1"> <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe> </div> </div> </body>
2 answers
solution1
0 2015-05-04 14:43:31
Seeing as you know that the width of #iframe is 60% , you can set the margins to 20% to center it.
#div1 { overflow-x: hidden; width: 100%; height: 1000px; } #iframe { width: 60%; height: 1000px; background: #FFFFFF; margin: 0 20%; }
<head> <title></title> <link href="menu.css" rel="stylesheet" type="text/css" /> <script src="script/jquery-1.11.1.min.js"></script> </head> <body> <div style="margin-left:auto;margin-right:auto"> <ul class="dropdown"> <li class="drop"> <a href="#">About us</a> </li> <li class="drop"> <a href="#">Contact us</a> </li> <li class="drop"> <a href="#">Services</a> </li> <li> <a href="#">Address</a> </li> </ul> </div> <div style="width:auto;margin:0 auto;"> <div id="div1"> <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe> </div> </div> </body>
solution2
0 2015-05-04 14:55:43
You can put that div inside another div, set the outter div width to 100% position relative, and then the inner div position to relative and margins to auto;
#outterDiv { width: 100%; position: relative; } #innerDiv { width: 60%; height: 400px; background: #FFFFFF; margin: auto; border: 1px solid #CCC; } #iframe { width: 100%; height: 100%; }
<div style="margin-left:auto;margin-right:auto"> <ul class="dropdown"> <li class="drop"> <a href="#">About us</a> </li> <li class="drop"> <a href="#">Contact us</a> </li> <li class="drop"> <a href="#">Services</a> </li> <li> <a href="#">Address</a> </li> </ul> </div> <div id="outterDiv"> <div id="innerDiv"> <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.