在網格佈局上居中覆蓋小部件實例

我有一個使用網格佈局的複合（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}，圖像中消失

我如何進行更改？

來源

2013-05-20 Raptor

你嘗試'this.getRoot（）加（IMG，{左：「50％」，最高：10} ）;'？ –

* facepalm *我錯過了百分比附近的報價。 '{左：「50％」}'幾乎工作。我應該減去圖像寬度的一半，但我該怎麼做？ – Raptor

回答你的問題的意見（爲了更好的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});

來源

2013-05-22 12:06:12

在網格佈局上居中覆蓋小部件實例

回答

相關問題