qooxdoo - 在网格布局上居中叠加小部件实例

Question

我有一个使用网格布局（qx.ui.layout.Grid）的复合材料。

但是，我必须在网格布局上覆盖图像。

我设法做到了：（c是复合材料，this而是应用程序）

c.setLayout(new qx.ui.layout.Grid());
var img = new qx.ui.basic.Image("myproject/test.png");
this.getRoot().add(img, {left: 500, top: 10});

图像成功覆盖在网格布局上。但是，鉴于应用程序占据了整个浏览器屏幕，我希望图像居中在屏幕的中心（仅 X 轴，Y 轴仍需要距顶部 10px）。

试过：

• {left: 50%}, 无法运行
• {margin: auto}，图像消失

如何进行更改？

Answer 1

在评论中回答您的问题（以获得更好的code example渲染）：

...
var imgWidth = qx.util.ResourceManager.getInstance().getImageWidth("myproject/test.png");
var imgWidthPercentage = imgWidth/qx.bom.Viewport.getWidth()*100;
this.getRoot().add(img, {left: (50-imgWidthPercentage)+"%", top: 10});