css - 在 GWT 中创建我自己的自定义小部件并使用我自己的自定义 CSS 代码对其进行样式设置

Question

我创建了一个自定义小部件，基本上是一个图像和一个文本标签。我必须做什么才能仅使用 CSS 来设置文本的位置(例如图像的顶部/左侧/底部)？我的意思是我的类需要哪些方法才能应用 CSS 样式？

ie 我可以有这样一个 css 类吗

.ImageAndLabel 
{
     imagePosition: top;
}

这是我的 gwt 类

    public class ImageAndLabel extends Composite
    {
        private Label label = new Label();
        private Image img = new Image("/images/pinkBackground.png");
        protected final FlexTable contentTable;

        public ImageAndLabel()
        {
            contentTable = new FlexTable();
            initWidget(contentTable);
            label.getElement().getStyle().setFontSize(40, Unit.PX);
            contentTable.setWidget(0,0,img);
            img.setHeight("200px");
            contentTable.setWidget(0,1,label);
            label.getElement().getStyle().setLeft(0, Unit.PX);
            img.getElement().setId("popupImg");
            label.getElement().setId("popupLabel");
        }

        public void setText(String text)
        {
            label.setText(text);
        }
    }

我想我想要的是我可以创建自己的自定义 CSS 代码吗？

Answer 1

您可以使用flextable 方法进行对齐。示例:

  flexTable.getFlexCellFormatter().setAlignment(0, 0, 
      HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);