2

次のように、ある panelGrid を別の 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 editor で見つける方法ですか?

ありがとう

4

1 に答える 1

1

panelGrid を正しい方法でセンタリングしようとしているとは思いません。これは、このサイトの他のいくつかの質問で説明されています。panelGrid は、ブロック レベルの要素である にレンダリングされます。text-lign: centerテキストを中央に配置するだけです。を使用margin: 0 autoして余白を調整する必要があります。

これらの回答を参考にしてください。

PanelGridを中央に揃えるには? JSF-Primefaces

CSS で div を中央に配置する- 悪い質問、良い答え

編集:私はあなたのページで簡単なプロジェクトを作成し、3 つの panelGrids すべてを中央に配置することができました: ここに画像の説明を入力

そのためのコードは次のとおりです (パネルをより簡単に区別できるように、0 ではなく 10 ピクセルのトップ マージンを追加しました):

    <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>
于 2016-06-14T14:03:47.867 に答える