中心内格的IFrame在中心位置的屏幕
问题描述:
我想中心内部的div的iframe在屏幕的中心我怎么能做好,我不知道是否失去了一些东西添加任何一个可以帮我请。我尝试添加保证金:0自动到#iframe但没有工作,但我需要做到这一点。中心内格的IFrame在中心位置的屏幕
<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>
答
看到,因为你知道,#iframe
的width
是60%
,你可以设置页边距,以20%
使其居中。
#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>
答
你可以把该div另一个DIV中,设置outter DIV宽度相对位置100%,然后将内DIV位置相对于和边距为自动;
#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>