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 width 试图让事情更清楚):

  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);
  }