将iframe内部插为div中的中心位置屏幕

我想将iframe置于屏幕中心的div中，我该如何制作，我不知道是否缺少任何东西来添加任何人可以帮助我。我尝试添加保证金：0自动到#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中，将外部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>

相关内容

最新更新

热门标签：