Question

如何使用垂直面板在gwt中垂直居中..或者pls sugest me有没有办法进行垂直镶嵌

Answer 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的示例和文档

Answer 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。

垂直居中于gwt

2 个答案: