将嵌套的 h:panelGrid 居中对齐

Question

我正在尝试将一个 panelGrid 包含到另一个中，例如：

 <h:panelGrid id="A" border="1" columns="1" style="width: 100%; text-align:center; display: table">
            <h:panelGrid id="B" border="1" columns="3">
                <h:outputText value="Name : "></h:outputText>
                <h:inputText></h:inputText>
                <h:commandButton value="Add"></h:commandButton>             
            </h:panelGrid>              
        </h:panelGrid>

我已经生成了类似的html：

    <table id="j_idt1:A" border="1" style="width: 100%; text-align:center; display: table">
<tbody>
<tr>
<td><table id="j_idt1:B" border="1">
<tbody>
<tr>
<td>Name : </td>
<td><input type="text" name="j_idt1:j_idt3" /></td>
<td><input type="submit" name="j_idt1:j_idt4" value="Add" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

...尽管有 css text-align:center :P

，但 panelGrid "B" 总是左对齐

这就是我在 Eclipse Web 编辑器中所拥有的：

这就是我在 Firefox 中所拥有的：

所以我的问题是如何找到包含的 panelGrid(s)使用 eclipse wtp css 编辑器？

谢谢

Answer 1

我认为您不会以正确的方式将 panelGrid 居中。这已在本网站上的其他几个问题中讨论过。 panelGrid 呈现为一个块级元素。 text-lign: center 只会将文本居中。您应该使用margin: 0 auto 来调整边距。

看看这些答案会有帮助：

How to align PanelGrid to center? JSF-Primefaces

Center a div in CSS - 不好的问题，好的答案

编辑： 我用您的页面做了一个快速项目，并且能够将所有 3 个 panelGrids 居中：

它的代码如下，（我添加了 10px 上边距而不是 0 以便更容易区分面板）：

    <h:panelGrid id="A" border="1" columns="1" style="margin: 10px auto; width: 100%; ">                            
        <h:panelGrid id="B" border="1" columns="2" style="margin: 10px auto;  width: 460px">
            <h:panelGrid border="1" columns="1" style="margin: 10px auto;">
                <h:inputText style="width: 310px; " ></h:inputText>                             
            </h:panelGrid>
            <h:commandButton value="Add"></h:commandButton>
        </h:panelGrid>
    </h:panelGrid>