如何使这个白色正方形默认情况下，而不是顶部左上角角落出现在中心？

问题描述

我有这样的jsfiddle其中白色方形总是出现在顶部左上角的手角落。

I have this jsfiddle where the white square always appear at the top upper-left hand corner.

我想使白色方块出现在中心取代。

I want to make the white square appear at the centre instead.

我试图让下面的（ X = 150，Y = 150 ）的code修改;

I tried to make the code change below (x = 150, y = 150);

.directive('ngDraggable', function($document) {   return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 150, y = 150,
          start, stop, drag, container;

然而，它没有工作。应该是什么样的权利code，以获得白色方块出现在市中心？

However, it did not work. What should be the right code to get the white square to appear at the centre?

推荐答案

如果你想要做的是有白色方块在某个位置开始的，然后给它在样式表中的位置。

If all you want to do is have the white square start out at a certain position, then give it the position in the stylesheet.

left: 130px;
top: 130px;

更新小提琴：

在JavaScript是用于拖动，没有定义初始状态。

The JavaScript is used for dragging, not for defining the initial status.

顺便说一下，这130px，不150.由于外层div是300像素宽，与内方的措施40PX，其偏移量需要是从中心-20px

By the way, it's 130px, not 150. Since the outer div is 300px across, and the inner square measures 40px, its offset needs to be -20px from the center.

编辑：或者，如果你想成为独立于容器的大小，置容器中的位置到相对并计算这样的立场：

or, if you want to be independent of the size of the container, set the container's position to relative and calculate the position like this:

left: calc(50% - 20px);
top: calc(50% - 20px);

较新的小提琴：

要知道，虽然只有现代浏览器都支持钙。

Be aware though that only modern browsers support calc.

这篇关于如何使这个白色正方形默认情况下，而不是顶部左上角角落出现在中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！