gwt 中的垂直居中答案

【问题标题】：vertical centering in gwtgwt 中的垂直居中
【发布时间】：2010-11-16 18:36:31
【问题描述】：

如何使用垂直面板在 gwt 中垂直居中.. 或者请告诉我有什么方法可以进行垂直居中

【问题讨论】：

【解决方案1】：

如果你想直接使用代码中的VerticalPanel，你需要使用setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)

你也可以使用 UiBinder 方法

<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
  <g:cell></g:cell>
</g:VerticalPanel>

查看DevGuideUiPanels 以获取示例和文档

【讨论】：

【解决方案2】：

我可以给你一个例子，说明我们是如何使用 css 实现的（实现类似弹出的行为）。

如果你用谷歌搜索它，有很多关于如何实现垂直居中的解决方案。这个例子对我们有用，所以不能保证它是否对你有任何帮助。

<!DOCTYPE html>
<html>
  <head>
    <style>
        * {
            margin: 0 auto; 
        }

        .popup {
            border-color:#ff4f00;
            border-style:solid;
            border-width:5px;
            background-color: #ffffff;
            text-align: left;
        }

        #wrapper, #container {
            height: 150px;
            width: 550px;
        }

        #wrapper {
            bottom: 50%;
            right: 50%;
            position:
            absolute;
        }

        #container {
            left: 50%;
            position: relative;
            top: 50%;
        }
    </style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>vertical centering</title>
  </head>
  <body>
    <div style="width: 965px; height: 515px;"></div>
    <div id="wrapper">
        <div class="popup" id="container">
            some content
        </div>
    </div>
  </body>
</html>

编辑：还要检查this question。

【讨论】：