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