当前位置：文江博客话题详情

CSS positioning

我正在尝试将 div 置于另一个 div 的中心

发布于 2024-10-26 01:06:21 字数 616 浏览 1 评论 0原文

这里是我正在使用的示例。如果可能的话，我希望不使用任何 javascript，如果绝对需要并且没有其他可能的解决方案，我将使用 jQuery。

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

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

FF4、Safari(iOS)/Chrome、IE9 是我的最终目标。

编辑：

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

丹的回答也有效。它让生成脚本承担计算负边距的责任。我认为这最终是可以接受的，但我希望我必须提供的只是所需的大小，而不是生成脚本中的任何与定位相关的信息。

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

一曲琵琶半遮面シ 2024-11-02 01:06:21

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

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

Generate negative margins in the same place as the sizes:

<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 原文

丿*梦醉红颜 2024-11-02 01:06:21

以 margin: 0 auto 居中。

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

回复收藏 0 原文

治碍 2024-11-02 01:06:21

如果归根结底，这里有一些 jQuery 操作来完成工作。

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

演示： jsfiddle.net/Marcel/7ucme

Well if it comes down to it, here's some jQuery action to get the job done.

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

Demo: jsfiddle.net/Marcel/7ucme

回复收藏 0 原文

~没有更多了~

关于作者

鲜血染红嫁衣

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lixs

文章 0 评论 0

敷衍　

文章 0 评论 0

盗梦空间

文章 0 评论 0

tian

文章 0 评论 0

13375331123

文章 0 评论 0

你对谁都笑

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文