Question

我似乎无法将黑匣子放到屏幕中央，而不是内部的div中心。

编辑：为了澄清，我只希望结果面板中央的黑盒子不是粉红色的盒子。此外，我还想保持我的javascript完整。

编辑2：当用户点击图像时，我试图在屏幕中间弹出一个叠加层。不确定这是否是实现这一目标的最佳方式或最佳代码！

如果有人能提供帮助，我将不胜感激。这是我的尝试：http://jsfiddle.net/BPLcv/1/

HTML

<div class="tooltip">
     <div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
     <div class="description">Poop</div>
</div>

CSS

.tooltip {
    position: relative;
    border: 1px #333 solid;
    width: 200px;
    height: 200px;
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}

.overlay {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.description {
    position: absolute;
    width: 300px;
    height: 300px;
    display: none;
    background-color: black;
    text-align: center;
    z-index: 1;
    /* centering???? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}

谢谢！

Answer 1

如果您想在屏幕中间显示描述/叠加层，最好的办法是使用工具提示元素之外的元素，因为它们是固定宽度。

如果你有一个带有width: 100%的顶级元素，那么你的中心css将适用于任何移民儿童。

工作小提琴：http://jsfiddle.net/BPLcv/4/

此处覆盖图中填充了您正在悬停的工具提示的description元素中的任何内容：

overlay.html($(this).find(".description").html());

描述类始终是隐藏的。

Answer 2

检查 Demo jsFiddle

CSS

body{
    margin:auto;
    width:50%;
}

Answer 3

试试这个。分配兴趣div id = CenterDiv，然后添加此css：

z-index:10;//remove left:50%

现在尝试通过onload或onclick等添加此功能：

function centerDiv() {
    document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300) 
/ 2)  + 'px';
}

数字300可以是表示您感兴趣的元素宽度的任何数字。

替换元素的宽度（此处为300px），此函数将使具有绝对位置的元素居中。

将div居中到屏幕

3 个答案:

CSS