logo标签列表

我正在尝试将一个 div 居中放置在另一个 div 中。

csspositioning
4
这是我正在处理的示例Here。如果可能的话，我不想使用任何javascript，如果绝对必要而没有其他解决方案，我会使用jQuery。
我试图居中的3个内部div是一个示例。最终结果，这些将由脚本生成，因此我不知道要在.circle类的负px大小中使用的宽度或高度。
我愿意更改div的结构，但我正在寻找干净且简单的东西，尽管我宁愿更改结构而不是使用javascript。
FF4，Safari（iOS）/ Chrome，IE9是我的最终目标。 编辑： 这是我想要的最终结果，但它使用了jquery。
Dan的答案也可以。它使生成脚本计算负边距。我认为这在最后是可以接受的，但我希望提供的只是所需的大小，而不是来自生成脚本的任何定位相关信息。
@thirtydot-现在没有。我手工编码。最终，这将由PHP或c＃生成，具体取决于我的服务器平台。
“这些是由脚本生成的” - 是什么脚本？如果它们是通过编程方式生成的，为什么不能像@Dan Marshall的答案那样输出所需的负边距值？ - thirtydot
我明白了。你知道你其实可以输出负边距，但你正在寻找一种避免这样做的方法，最好不使用JavaScript。 - thirtydot
3个回答
4
在相同的位置生成负边距以达到所需大小：
<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>
0

好吧，如果必要的话，这里有一些jQuery操作可以完成任务。

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

演示：jsfiddle.net/Marcel/7ucme

0

使用margin: 0 auto进行居中。

您无需提前知道宽度，只要它们被明确设置即可。

没错。但它们是内联的HTML元素。 - Kon
@Kon 确实，但另一个问题是OP使用了特定的顶部边距。看一下他的jsfiddle，你就会明白我的意思。你的代码会在居中过程中覆盖这些边距。 - Matthew Cox
这只有助于水平居中 - 你忽略了问题的难点; 垂直居中。 - thirtydot
@Kon 这对于宽度应该可以工作（我认为，.center类当前是绝对定位），但对于高度不起作用。 - Justin808
@Matt，如果你在设置内联的顶部边距时添加!important，那么就不会被覆盖了。 :)@thirtydot，抱歉...我没有看到问题中有关于垂直居中的内容。啊，算了，忽略吧。 - Kon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接