Question

我正在尝试将弹出窗口对齐到页面的中心。无论我点击哪个图像框，弹出窗口都应显示在页面中央，无需向上或向下滚动

请帮助我实现它。测试链接网站：http://www.scs-qa.com/panamera/trading.html

  .white_content 
  {

-moz-border-radius: 5px 5px 5px 5px;
background-color: white;
border: 3px solid #000000;
display: none;
height: auto;
left: 30%;
overflow: auto;
padding: 16px;
position: absolute;
top: 10%;
width: 500px;
z-index: 1002;
border-radius: 15px 15px 15px 15px;
text-align: justify;
font-size: 10pt;
font-family: 'Tahoma' ;

}

HTML

 <div class="trading-img-box">
 <a href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'">
 <img class="trading-img" src="img/trading1.png">
 </a>
<h1 class="trading-h1">Furniture</h1>
 <p style="height:0; clear:both;" class="trading-p">It 's pleasant to live spec..</p>
 </div>





<div id="trading1" class="white_content">
<a style="float:right" href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='none';document.getElementById('body-below-otherpage-small-trading').style.display='block'">Close</a>
<br/><br/>
<img src="img/tradingb1.png" style="margin-top: 5px; margin-left: 25px; margin-right: 5px"><br/><br/>
<strong>Furniture</strong>
<p>some text
</p><br/>
<p>some text
</p>
</div>

Answer 1

试试这个：

.white_content { 左：50％; 保证金左：-250px; }

Answer 2

如果您需要一个独立于div大小的解决方案，那么您需要使用javascript或jquery。

http://jsfiddle.net/DerekL/GbDw9/

弹出问题 - 对齐中心

2 个答案: