在图像顶部居中放置div

Question

由于某些原因，我不能让它工作：Website

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

谢谢你的帮助。

Answer 1

尝试将以下属性与位置一起设置

上:0；左:0；

您还可以设置top或left属性，以使框在中心可见

如果您希望您的boxes保持在center div中，那么将id为的div初始位置设置为: relative

这将有助于解决您的问题

Answer 2

在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 3

正如建议的那样，您可以使用CSS定位您想要做的事情，使用图像映射可能更好

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

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