Question

出于某种原因，我不能让这个工作： Website

（红色和绿色框在正确定位后将被移除。）

感谢您的帮助。

Answer 1

以css为中心的整体概念非常简单。首先，您需要一个相对定位的容器。要居中的子元素必须具有固定的宽度和高度，并且绝对位于距离顶部50％和左侧50％的位置，并且顶部和左边距分别必须是宽度和高度的负半部分。换句话说：

<div id="container">
    <img src="" alt=""/>
    <div class="box"></div>
</div>

#container { position: relative; }
img { dispaly: block; } /* It fills the container */
#box {
    position: absolute;
    width: 300px; /* Fixed */
    height 150px; /* Fixed */
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 300/2 */
    margin-left: -150px; /* 150/2 */
}

Answer 2

根据建议，您可以使用CSS定位来执行此操作，您可能最好使用图像映射

http://www.w3schools.com/tags/tag_map.asp

这允许您将图像的某些区域设置为链接。

Answer 3

尝试设置以下属性和位置

顶部：0; 左：0;

您还可以设置顶部或左侧属性，以便在中心显示框

如果你想让你的盒子保留在中心div内，那么让id为splash的div到位置：relative

它将有助于解决您的问题

将div放在图像顶部

3 个答案: