Question

这是我的代码不起作用。图像仍位于左上角。

public class MyImage extends Composite{

private Grid panel;
private Image image;

public MyImage(String imageUrl){
    image = new Image(imageUrl);
    panel = new Grid(3,3);
    panel.setSize("150px", "150px");
    image.setSize("96px", "96px");
    panel.getCellFormatter().setHorizontalAlignment(1, 1, HasHorizontalAlignment.ALIGN_CENTER);
    panel.getCellFormatter().setVerticalAlignment(1, 1, HasVerticalAlignment.ALIGN_MIDDLE);
    panel.setWidget(1, 1, image);

    initWidget(panel);
}

}

Answer 1

使用DOM样式属性：

    DOM.setStyleAttribute(image.getElement(), "marginLeft", "auto");
    DOM.setStyleAttribute(image.getElement(), "marginRight", "auto");
    DOM.setStyleAttribute(image.getElement(), "marginTop", "auto");
    DOM.setStyleAttribute(image.getElement(), "marginBottom", "auto");

上面的

将您的图像正好放在网格单元格的中心，现在将图像设置为网格。如果您还希望将网格放置在视图的中心位置：

    DOM.setStyleAttribute(panel.getElement(), "marginLeft", "auto");
    DOM.setStyleAttribute(panel.getElement(), "marginRight", "auto");
    DOM.setStyleAttribute(panel.getElement(), "marginTop", "auto");
    DOM.setStyleAttribute(panel.getElement(), "marginBottom", "auto");

Answer 2

您可以使用flowpanel并在其上添加图像并为图像设置填充，而不是网格。它会起作用。

以下是代码：

            fPnlMainContainer = new FlowPanel();
            image = new Image("info.png");


            image.setSize("96px", "96px");

            fPnlMainContainer.add(image);
            image.getElement().getStyle().setPadding(123, Unit.PX);


            initWidget(fPnlMainContainer);

GWT：如何在网格中使图像对齐中心

2 个答案: