Question

我正在尝试将gwt应用程序集中在页面中间，我尝试了以下内容。

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

        }

我的gwt应用程序中的样式表中有一个.center，其中包含以下内容。

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

但这似乎不起作用。

Answer 1

你可以试试;

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

    }

Answer 2

浏览此链接

http://phrogz.net/css/vertical-align/index.html

你可以轻松实现

Answer 3

只需在您的css文件中添加

体{ 余量：0; 填充：0; 文本对齐：中心; }

.center { 保证金：0px auto; 宽度：480px; 文本对齐：左; }

如何将gwt应用程序置于页面中间

3 个答案: