Центрирование экземпляра наложенного виджета по макету сетки

У меня есть Composite using Grid Layout (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 по-прежнему должна быть на 10 пикселей сверху), учитывая, что приложение занимает весь экран браузера.

Пытался :

  • {left: 50%}, не могу бежать
  • {margin: auto}, изображение пропадает

Как я могу внести изменения?


qooxdoo
person Raptor    schedule 20.05.2013    source источник
comment
Вы пробовали this.getRoot().add(img, {left: "50%", top: 10});?   -  person Richard Sternagel    schedule 22.05.2013
comment
facepalm Я пропустил цитаты в процентах. {left: "50%"} Практически работает. Я должен уменьшить половину ширины моего изображения, но как я могу это сделать?   -  person Raptor    schedule 22.05.2013

Ответы (1)


arrow_upward
2
arrow_downward

Ответьте на свой вопрос в комментариях (для лучшего 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});
person Richard Sternagel    schedule 22.05.2013