Question

我使用Oracle jDeveloper创建了一个登录页面。目前，它出现在左上角。如何将此页面沿x轴和y轴居中（将面板框放在中间）？这是screenshot，代码如下所示。

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="untitled1.jsf" id="d1">

<af:form id="f1">
<af:panelBox text="Login"
                     inlineStyle="width:260px;" id="pb1">
                             <table>
                <tbody>
                  <tr>
                    <td>
                      Username
                    </td>
                    <td>
                      <input type="text" id="j_username" name="j_username"/>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        Password
                    </td>
                    <td>
                      <input type="password" id="j_password"
                             name="j_password"/>
                    </td>
                  </tr>
                  <tr>
                    <td align="right" colspan="2">
                      <input id="login" type="submit" value="Log In"  />
                    </td>
                  </tr>
                </tbody>
              </table>
    </af:panelBox>
    </af:form>

        </af:document>
    </f:view>

Answer 1

最简单的方法是使用PanelGridlayout管理器，设置行和列，并将面板框放在适当的单元格中。 ADF Faces中的正确居中和对齐是通过布局管理器完成的，而不是硬编码HTML。开始here。这tutorial可能会有所帮助，this。

Answer 2

有一个名为<center>的标记会将所有数据对齐到中心.HTML中心元素<center>是一个块级元素，可以包含段落和其他块级和内联元素。此元素的整个内容在其包含元素内水平居中。添加具有明确宽度和边距的div：0 auto。并使用一些CSS

检查更新的代码

＆＃13;

<html>
<head>
<body>
<af:form id="f1">
<af:panelBox text="Login"
                     inlineStyle="width:260px;" id="pb1">
<center>
<div style="width: 500px; margin: 200px auto 0 auto;">
                             <table>
                <tbody>
                  <tr>
                    <td>
                      Username
                    </td>
                    <td>
                      <input type="text" id="j_username" name="j_username"/>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        Password
                    </td>
                    <td>
                      <input type="password" id="j_password"
                             name="j_password"/>
                    </td>
                  </tr>
                  <tr>
                    <td align="right" colspan="2">
                      <input id="login" type="submit" value="Log In"  />
                    </td>
                  </tr>
                </tbody>
              </table>
<center>
</div>
    </af:panelBox>
    </af:form>


</body>
</head>
</html>

＆＃13;

希望它有所帮助。很乐意提供帮助

如何将面板盒居中？

2 个答案: