我如何使用GWT垂直居中元素？ [英] How can I vertically center an element with GWT?

问题描述

也许我一直没有找到正确的方法，但我无法弄清楚如何使用GWT布局面板来居中元素。

Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.

I' m使用UiBinder，我试过所有实现HasVerticalAlignment（DockPanel，Horizo​​ntalPanel，VerticalPanel）的面板。他们都没有看到设置垂直对齐（或甚至水平）的任何影响。我确定他们的宽度和高度都是100％，从我的浏览器中检查了所得到的DOM布局，似乎没有任何东西会从这些属性中改变。

I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.

相关的UiBinder摘录（省略了额外的docklayout元素）：

Pertinent UiBinder extract (with extra docklayout elements omitted):

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" />
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

我想到的快速而脏的修复方法是创建我自己的CenterPanel小部件，它基本上是一个包含带有valign =middle单元格的HTML表格的HTMLPanel封装器。但是，这基本上感觉像是古典css布局中间居中问题的倒退。当然GWT有这样的事情，我已经完全忽略了？

The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?

推荐答案

可以使用像cell元素这：

Centering an item can be done with a cell element like this:

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>

这篇关于我如何使用GWT垂直居中元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！