Horizontal center a FlexTable in a parent FlowPanel? - gwt

Question

I've created a FlexTable, and I want to center it horizontally within a parent FlowPanel, like:
FlexTable ft = new FlexTable();
ft.add(0, 0, new Label());
ft.add(0, 1, new Orange());
ft.add(0, 2, new Label());
FlowPanel parent = new FlowPanel();
parent.add(ft); // how can I horizontally center the table in this div?
The content of the table is narrower than the parent FlowPanel (which is width:auto, the whole width of the browser), but the table is left-aligned right now,
Thanks

Answer 1

Two options:
parent.getElement().getStyle().setTextAlign(TextAlign.CENTER);
or
ft.getElement().getStyle().setProperty("margin", "0 auto");
You can use CSS styles instead, of course.

Answer 2

First of all? Which version of GWT are you using? The reason am asking this question, there is no method in FlexTable that is similar to add (int, int, Widget ) you have used in the latest version.
However, you can use the following code.
FlexTable ft = new FlexTable();
ft.setWidget(0, 0, new Label("a"));
ft.setWidget(0, 1, new Label("b"));
ft.setWidget(0, 2, new Label("c"));
FlowPanel parent = new FlowPanel();
parent.setSize("100%", "100%");
parent.add(ft);
parent.getElement().getStyle().setProperty("TextAlign", "center");
// If you are using Firefox :
//parent.getElement().getStyle().setProperty("TextAlign", "-moz-center");
RootLayoutPanel.get().add(parent);
If you dont't wish to mention the style in the java code, you can always use CSS like
parent.addStyleName("myStyle");
In CSS
.myStyle{
text-align : center;
}