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>

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

HTMLPanel以UIBinder和GWT为中心

1 个答案: