简体   繁体   English

使用jQuery将div放在另一个的中心

[英]Place a div at center of another with JQuery

I've a personal project to learn more about HTML/CSS/JS. 我有一个个人项目,以了解有关HTML / CSS / JS的更多信息。
But I got a problem with it. 但是我有一个问题。

I have two divs in my <body> , each one with 2 circular concentric div. 我的<body>有两个div,每个div具有2个圆形的同心div。 One is placed on the center of the area, the other one not. 一个放在该区域的中心,另一个不在。

<div id="sphaea_bloc">   
    <div id="actor" class="actor_locked">
        <div class="actor_extern_locked"> </div>
        <div class="actor_intern_locked"> </div>
      </div>

      <div id="lock" class="lock_locked">
        <div class="lock_extern_locked"> </div>       
        <div class="lock_intern_locked"> </div>
      </div>    
</div>

The base placement is good. 基本位置很好。

The second step is to add drag'n'drop with JQuery, and it works fine. 第二步是使用JQuery添加拖放。 The aim is to drop the little div into the bigger div. 目的是将小div放到大div中。
When it fails, it correctly returns at a base position. 当它失败时,它会正确返回到基本位置。
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric). 但是现在,当放置效果良好时,我想用JQuery将小div放到较大div的中心(使4个圆同心)。

I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why. 我搜索了很长时间,但是却没有遇到问题:我的2个div之间总是有一点偏移...而且我不明白为什么。

Here is the fiddlejs link : FiddleJS link 这是fiddlejs链接: FiddleJS链接

Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ? 有人可以帮助我找到问题,为什么我的小div总是在较大的div内但偏移了?

Thanks in advance ! 提前致谢 ! AeldredOni 阿德雷德·奥尼

i have did like below, and its working, it will be centered even if you change with and height of divs: 我做了下面的事情,它的工作原理将是居中的,即使您更改div的高度和它也是如此:

.actor_locked {
  position:absolute;
  left:-9999px;
  right:-9999px;
  top:-9999px;
  bottom:-9999px;
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50px;
}

http://jsfiddle.net/xga3dzfm/1/ http://jsfiddle.net/xga3dzfm/1/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM