在网格布局上居中叠加小组件实例

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