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

css, gwt

Solution

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

    }

Problem

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.

Original source