Question

我的facelet 1.xhtml包含以下内容

<h:form id="frm">
    ...
</h:form>

如何将此表单完全呈现在屏幕中心？

Answer 1

<h:head>
    <h:outputStyleSheet library="css" name="stylesheet.css/>
</h:head>   

<div id="formdiv">    
    <h:form id="frm">
        ...
    </h:form>
<div>

stylesheet.css中

#formdiv {
    margin: 0 auto;
}

-Or -

<head>
    <style>
        #formdiv {
            margin: 0 auto;
        }
    </style>
</head>

<h:body>
    <div id="formdiv">    
        <h:form id="frm">
            ...
        </h:form>
    <div>
</h:body>

另见How to center a div horizontally

How to position div in middle of screen

Answer 2

根据表单的内容，您可能需要在比最外层div更深层次上应用CSS样式

 <div class="centred-form">
    <h:form>
       <h:panelGrid>
          ...
       </h:panelGrid>
    </h:form>
</div>

将使表单居中，但面板网格将在表单上保持对齐，以达不到目的。

相反，您可以将样式类应用于面板网格：

    <h:form>
       <h:panelGrid styleClass="centred-form">
          ...
       </h:panelGrid>
    </h:form>

和CSS

.centred-form {
    margin : 0 auto;
}

如何在中心渲染表格

2 个答案: