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编辑器找到包含的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对齐在中心

1 个答案: