居中对齐嵌套 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>

...问题是 panelGrid "B" 始终向左对齐，尽管 css text-align:center :P

这就是我在 eclipse 网络编辑器中的内容：

这就是我在 firefox 中的内容：

所以我的问题是如何使用 eclipse wtp css editor?

找到包含的 panelGrid
谢谢

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>

居中对齐嵌套 h:panelGrid

Align nested h:panelGrid in center

jsf

jsf-2

panelgrid