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

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