中心內格的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>

來源

2015-05-04 ahmeaad

看到，因爲你知道，#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>

來源

2015-05-04 14:43:31

你可以把該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>

來源

2015-05-04 14:55:43

中心內格的IFrame在中心位置的屏幕

回答

相關問題