I'm trying to center divs inside of another div_问答_开发者

I'm trying to center divs inside of another div

开发者 https://www.devze.com 2023-02-20 01:30 出处：网络

Here is the sample I\'m working with. I would like to not use any javascript if possible, and if absolutely required with no other solutions possible I would use jQuery.

Here is the sample I'm working with. I would like to not use any javascript if possible, and if absolutely required with no other solutions possible I would use jQuery.

The 3 inner divs I'm trying to center are an example. In the end result, these are generated by script so I wont know the width or height to use a negative px size for the margin's in the .circle class.

I'd be willing to change the structure of the div's but I'm looking for something clean and s开发者_StackOverflowimple, though I would rather change the structure than use javascript.

FF4, Safari(iOS)/Chrome, IE9 are my end targets.

edit:

This is the end result I would like, but its using jquery.

Dan's answer would work as well. It puts the onus on the generating script to calculate the negative margins. This would be acceptable in the end I think but I was hoping that all I would have to provide would be the desired size and not any positioning related information from the generating script.

@thirtydot - Right now, none. I'm coding by hand. in the end this would be generated by either PHP or c# depending on my server platform.

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>

Center with margin: 0 auto.

You don't need to know the width's ahead of time, as long as they are set explicitly.

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

I'm trying to center divs inside of another div

精彩评论

关注公众号

热门标签

图文推荐

I'm trying to center divs inside of another div

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：