css - 以 UIBinder 和 GWT 为中心的 HTMLPanel

Question

下面的代码在浏览器的左上角显示了一个登录框，但我想将它显示在中间。

我阅读了有关如何使用 CSS 样式元素和单元格元素居中的各种主题，但它们不起作用。也许我做错了什么。

我刚刚开始学习 UiBinder，所以请原谅我糟糕的风格。

如有任何帮助，我们将不胜感激。

代码如下:

<ui:style>
        buttonsDiv{
        float: right;
        margin-top: 20px;
    }
</ui:style>
<g:DialogBox text="Instructor Registration">
    <g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>First Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Last Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Institution</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Department</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>

        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Button ui:field="submit">Submit</g:Button>
            <g:Button ui:field="goBack">Cancel</g:Button>
        </g:HTMLPanel>

    </g:HTMLPanel>
 </g:DialogBox>

Answer 1

编辑:添加了 Marconius CSS

以下代码允许您将对话框的左上角居中(注意我在您的 ui Binder css 语法中所做的一些更正):

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .buttonsDiv {
            margin-top: 20px;
        }

        .centerCss {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 300px;
            margin-top: -150px;
            margin-left: -75px;
       }
    </ui:style>
    <g:VerticalPanel stylePrimaryName="{style.centerCss}">
        <g:DialogBox text="Instructor Registration">
            <g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>First Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Last Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Institution</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Department</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>

                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Button ui:field="submit">Submit</g:Button>
                    <g:Button ui:field="goBack">Cancel</g:Button>
                </g:HTMLPanel>
            </g:HTMLPanel>
        </g:DialogBox>
    </g:VerticalPanel>
</ui:UiBinder> 

如果你真的想让对话框本身居中，你应该多做一些考虑，这不是那么简单。您可能想看看 PopupPanel 类中 center() 方法的实现。