javascript - 居中多个项目

Question

在我的应用程序中，我有一堆矩形。

我正在尝试将屏幕上的所有这些矩形水平居中。（中心为 screen_width/2）

到目前为止，这是我的代码（为了您的观看乐趣），

            for (var j=0;j<rectangles.length;j++){
                rectangle=rectangles[j];
                                    var margin=120;
                var coefficent=0;
                var center_index=Math.ceil(rectangles.length/2);
                if (j>center_index){
                     coefficent=1;
                }else if (j<center_index){
                    coefficent=-1;
                }


                var x=(screen.width-rectangle.width)/2+j*margin*coefficent;
                rectangle.SetX(x);

                }

此代码将所有内容放在中心（不酷）。

对此问题的任何帮助将不胜感激。

编辑：

很抱歉没有说清楚，

这是另一个更清晰的图像（线，是中心线）：

所以你可以看到，我们正在移动所有的矩形，使中间的矩形在中心。

就像您按下中心按钮以在 Word 文档上水平居中文本一样，我正在尝试使用矩形来执行此操作。

Answer 1

不确定没有完整的代码（我建议使用 jsfiddle），但您似乎使用 center = width/2 来处理超过 2 个矩形。如果您有 3 个矩形，则使用绝对中心定位将不起作用。我建议通过将宽度除以矩形的数量来居中，然后将其用作每个矩形的中心点，即（未经测试的伪代码，因为我没有完整的代码。我还添加了一些不需要的变量，例如currentRectHalf 宽度试图使事情更清晰）：

  var width=500; //fill in with your width
  var margin=120; //margin
  var numRectangles=rectangles.length; //from your example
  var offset=width/numRectangles;
  for(var i=0;i<numRectangles;i++) {
    currentRectHalfWidth=rectangle.width/2;
    currentCenter=(offset+1)*offset+margin-currentRectHalfWidth; //+1 because of zero index array
    rectangle.SetX(x);
  }

Answer 2

看起来好像您没有设置矩形的 Y 值。您需要在代码中的某处设置它们的 Y 值，这样它们就不会都在精确的中心。