Question

我想将iframe放在屏幕中心的div中心我怎么能做到，我不知道是否遗漏任何东西可以帮助我。我尝试添加保证金：0 auto to＃ iframe，但没有工作，但我需要做什么。

＆＃13;

<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>

＆＃13;

Answer 1

如您所知width的{{1}}为#iframe，您可以将边距设置为60%以使其居中。

＆＃13;

20%

＆＃13;

#div1 {
  overflow-x: hidden;
  width: 100%;
  height: 1000px;
}
#iframe {
  width: 60%;
  height: 1000px;
  background: #FFFFFF;
  margin: 0 20%;
}

＆＃13;

Answer 2

你可以将div放在另一个div中，将outter div width设置为相对100％的位置，然后将div的内部位置设置为relative，将margin设置为auto;

＆＃13;

#outterDiv {
  width: 100%;
  position: relative;
}
#innerDiv {
  width: 60%;
  height: 400px;
  background: #FFFFFF;
  margin: auto;
  border: 1px solid #CCC;
}
#iframe {
  width: 100%;
  height: 100%;
}

＆＃13;

<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>

＆＃13;

将div中的IFrame置于居中位置屏幕中

2 个答案: