GWT: How to align the image in Grid

advertisements

Here are my codes that doesnt work. The image is still at top left corner.

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

}


use DOM style attributes:

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

above will place your image exactly center to the cell of the grid,and now set the image to your grid.If you further wants to place your grid exactly center to the view:

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