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

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);