Qooxdoo 图像居中

Question

我对 qooxdoo 有疑问。我使用宽度和高度为 244px 的 qx.ui.basic.Image，但图像源较小。现在我想将图像居中 qx.ui.basic.Image。我该怎么做？

var imageZoneTemp = new qx.ui.basic.Image("pathtoimagesource");
imageZoneTemp.set({
    width: 244,
    height: 244,
});

Answer 1

我将图像放入 qx.ui.container.Composite 中，Atom 布局的 center 属性设置为 true:

var container = new qx.ui.container.Composite().set({
  layout: new qx.ui.layout.Atom().set({center: true}),
  width: 244, 
  height: 244
});

var image = new qx.ui.basic.Image("pathtoimagesource");
container.add(image);

请注意，使用这种方法，您不会将宽度和高度值分配给图像，而是分配给容器。

Answer 2

只需使用一个原子：

var image = new qx.ui.basic.Atom(null, "next.png").set({
    center: true,
    show:   'icon',
    width:  244,
    height: 244
});

Qooxdoo 图像居中

Qooxdoo Image centering

qooxdoo