php - 如何定位图片弹出按钮

Question

所以我有这个问题。我想将我的弹出窗口居中，但这是关键。我不知道图片的尺寸是多少，因为它是用户上传的图片。如果我把屏幕变小，我也不会让图片消失。我试图将位置设置为相对，但随后它会将我的图像/文本推到弹出窗口后面。

<div id="imageFlyout<?=$step['order']+1?>" class="popUpWrapper" style="display:none;position:absolute;top:100px;left:<script type="text/JavaScript">
            int w = screen.width;
            <?php $tempSize=getimagesize("guidebook_images/".$step['attachment']); if($tempSize[0] > 935){?>w/2<?php }else{?>w-<?php echo($tempSize[0]/2);}?></script>px;">

Answer 1

Centering in HTML is an easy two step process:

Give the parent:

text-align:center;

Give the element:

margin:auto;

Answer 2

演示：http: //jsfiddle.net/uriahjamesgd_73/kNFGj/22/

我使用 CSS 值 VW（查看器宽度）和 VH（查看器高度）来指定浮出控件是给定实例中视口的百分比。希望这允许在移动设备中调整视口的大小。

<!-- HTML -->
<div class="wrap">
  <div class="product">
    <span class="flyOut"></span>
  </div>
</div>​

/* CSS */
body { margin: 50px; }
.wrap { position: relative; }
.product { background-color: #555; position: relative; width: 100px; height: 75px; }
span.flyOut { display: none; background-color: #ddd; position: absolute; width: 50vw; height: 37.5vh; left: 100%; }
.product:hover > span.flyOut { display: inline-block; }

​</p>