How to center a gwt application in the middle of the page

css gwt

12,701

You can probably try;

HTML;

<head>
      <style type="text/css">
    div#container
{
 margin-left: auto;
 margin-right: auto;
 width:480px;
}
        </style>

<script language="javascript" src="com.mycompany.project.TEST/com.mycompany.project.TEST.nocache.js"></script>

</head>

<body>
<div id="container" align="center">


</div>
</body>

onmoduleLoad;

public void onModuleLoad() {
        RootPanel rootPanel = RootPanel.get("container");

        Image image = new Image("images/board.png");


        FlowPanel fp = new FlowPanel();

        fp.add(image);
        fp.setStyleName("center");
        rootPanel.add(fp);

    }

12,701

Author by

james

Updated on June 14, 2022

Comments

james almost 2 years

I am trying to center a gwt application in the middle of the page,I have tried the following.

public void onModuleLoad() {
            RootPanel rootPanel = RootPanel.get();

            Image image = new Image("images/board.png");


            FlowPanel fp = new FlowPanel();

            fp.add(image);
            fp.setStyleName("center");
            rootPanel.add(fp);

        }

I have a .center in my stylesheet within the gwt application that has the following.

.center{
    margin: 0px auto;
    width: 480px;
}

But this seems not to work.

Yusuf K. over 13 years

With this method, you put your application's main part to center. And other widgets replaced, comes to the center without giving style.