居中的div

出于某种原因，我不能得到这个工作： Website 居中的div

（红色和绿色的盒子将被一旦他们正确定位删除。）

谢谢您的帮助。

来源

2012-03-06 Brandon

你能解释一下你想达到什么吗？对我来说它不明确 – 2012-03-06 02:54:16

对不起，我觉得这是显而易见的。我试图在“黑暗的征服者（Swtor）进入这里”中心的红色方块以及“Reign（Tera）进入这里”的绿色方块。 – Brandon 2012-03-06 02:55:52

尝试与位置沿设置下列属性

顶部：0; left：0;

您还可以设置顶部或为了使箱子在中心

，如果你想你的盒子将保持中心格内，然后让与ID飞溅到位置股利可见光左性质：相对

它会解决你的问题

来源

2012-03-06 02:55:43 Nishant

谢谢！这是我的问题最简单的解决方案。 – Brandon 2012-03-06 03:17:53

以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 */ 
}

来源

2012-03-06 02:55:13 elclanrs

只要您知道需要居中的物品的高度，就可以满足您的需求。如果你不知道身高，事情会变得更加棘手。 – 2012-03-06 02:57:28

是的，在那些情况下，我通常只使用一个简单的jquery插件http://jsfiddle.net/elclanrs/RMsSh/ – elclanrs 2012-03-06 03:00:08

至于建议，你可以做到这一点与CSS定位寿你看起来是可以尝试做帮助，你可能会更好使用图像映射

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

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

来源

2012-03-06 02:57:33 SynXsiS