Question

Here是我正在使用的样本。我想尽可能不使用任何javascript，如果绝对需要而没有其他可能的解决方案，我会使用jQuery。

我试图集中的3个内部div是一个例子。在最终结果中，这些是由脚本生成的，因此我不知道在.circle类中使用负px大小的宽度或高度。

我愿意改变div的结构，但我正在寻找一些干净简单的东西，尽管我宁愿改变结构而不是使用javascript。

FF4，Safari（iOS）/ Chrome，IE9是我的最终目标。

修改

This是我想要的最终结果，但它使用了jquery。

丹的回答也会奏效。它将生成脚本的责任放在计算负边距上。我认为这最终是可以接受的，但我希望我所提供的所有内容都是所需的大小，而不是生成脚本中任何与定位相关的信息。

@thirtydot - 现在，没有。我是手工编写的。最后，这将由PHP或c＃生成，具体取决于我的服务器平台。

Answer 1

在与尺寸相同的位置生成负边距：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    .container
    {
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid yellow;
    }
    .circle
    {
        position: absolute;
        -moz-border-radius: 100%;
        border-radius: 100%;
        top: 50%;
        left: 50%;
     }
    .white
    {
        border: 1px solid White;
    }
    body
    {
        background-color: black;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="circle white" style="width: 100px; height: 100px; margin-top:-50px; margin-left: -50px"></div>
        <div class="circle white" style="width: 200px; height: 200px; margin-top:-100px; margin-left: -100px"></div>
        <div class="circle white" style="width: 400px; height: 400px; margin-top:-200px; margin-left: -200px"></div>
    </div>
</body>
</html>

Answer 2

以margin: 0 auto为中心。

只要明确设置，您就不需要提前了解宽度。

Answer 3

如果它归结为它，这里有一些jQuery动作来完成工作。

$(".circle").each(function(){
    $(this).css({top: -$(this).height()/2, left: -$(this).height()/2 });
});

演示： jsfiddle.net/Marcel/7ucme

我试图把div放在另一个div里面

3 个答案: