Question

我在GWT中DecoratorPanel正确对齐我的内容时遇到了问题。

使用以下代码段，所有内容似乎都与中间（？）

垂直对齐

DecoratorPanel decor = new DecoratorPanel();
decor.setHeight("100%");
decor.add(new Label("Test"));

图解释：

             --------                 --------
I get this:  |      |    I want this: |test  |
             |      |                 |      |
             |test  |                 |      |
             |      |                 |      |
             |      |                 |      |
             --------                 --------

我尝试了decor.getElement().getStyle().setVerticalAlign(VerticalAlign.TOP);，但似乎没有任何影响。

如何将内容与面板顶部对齐？

更新

我注意到如果我使用LayoutPanel代替DecorPanel，一切似乎都正确对齐。

问题是我使用Panels定期LayoutPanels吗？如果是这样，为什么我有问题？

Answer 1

DecoratorPanel使用HTML table，而另一个使用div。因此，使用DecoratorPanel，您可以在table元素上设置垂直样式而不是内容，这可以解释您所看到的内容以及不使用此面板的原因。因此，您应该使用基于div的面板或在标签上设置对齐方式或td（label.getElement().getParent()，但这有点难看并且容易出现未来的错误。）

Answer 2

获取td元素。

... . getElement().setStyleName("myStyle");

然后在你的CSS中

.myStyle td{
vAlign : centre;
}

Answer 3

DecoratorPanel是9-box面板，用于放置图像，特别是小部件的圆角效果，它最有用，当你设置100％时，你的小部件周围有一个单元格，它可能会应用一些宽度和高度的所有您看到标签位于中心的单元格。

垂直对齐GET面板

3 个答案: