如何使面板框居中？答案

【问题标题】：How can I centre a panel box?如何使面板框居中？
【发布时间】：2016-01-17 23:36:51
【问题描述】：

我使用 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>

【问题讨论】：

标签： jsp jsf oracle-adf

【解决方案1】：

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

【讨论】：

嗯，ADF Faces 是一个更高层次的抽象和框架，不仅仅是 HTML 和 CSS。我们使用 ADF Faces 是因为它为我们做了很多事情，而且我们必须处理低级 CSS。我们为特殊样式、字体、颜色和主题保留 CSS。在 ADF Faces 中，做他想做的事情的正确方法就是我所说的 - 使用布局管理器为您居中。否则，不要使用 ADF Faces，您可以根据需要对 HTML 和 CSS 进行硬编码。请记住，发帖人一开始就说他正在使用 JDeveloper/ADF Faces。我正在回答所提出的问题和意图。
我不是来比较 HTJML/CSS 和 ADF Faces 之类的框架。我相信您了解两者之间的区别。也许这会有所帮助：docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm 和 community.oracle.com/docs/DOC-890831
Wooowww... 抱歉。和平

【解决方案2】：

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

检查更新的代码

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

希望对您有所帮助。乐于助人

【讨论】：

uhhhh... head 在 body 附近？和<center>?那就是deprecated for several years now的标签，就像和一样，
@Kukeltje：确实计划弃用 和，但最终取消了。 It's still in HTML5。  已成为事实上的“图标”元素， 基本上只应在您用完 <h1-6> 标签时使用。
尽管如此，对 plagiarism 的强烈反对并推荐自 1998 年以来已弃用的方法。