Qooxdoo 图像居中答案

【问题标题】：Qooxdoo Image centeringQooxdoo 图像居中
【发布时间】：2016-12-25 04:08:13
【问题描述】：

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

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

【问题讨论】：

标签： qooxdoo

【解决方案1】：

我会将图像放入具有 Atom 布局的 qx.ui.container.Composite 中，该布局的 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);

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

【讨论】：

我知道该怎么做。但我不喜欢这种通常容易做的事情的包装容器。没有包装容器的任何其他方法？

【解决方案2】：

只需使用一个原子：

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

【讨论】：