p：graphicImageをp：columnの中心に合わせる

Question

私はPrimeFaces 6.0でテストJSFプロジェクトを開発しています。 テーブルのような構造で中央に配置されたアイコンはほとんどありません。 p：rowとp：columnを持つp：panelGridを使用して、テーブルのような構造を作成してみました。p：iconを表示するためのp：graphicImage。

問題は、p：graphicImageをセルの中央に、つまりp：列の内側に配置することです。

私のコードのサンプルは以下の通りです。希望の結果が得られていません。テストの時間後

<p:panelGrid id="pgIcons" style="width: 100%;"> 
    <p:row> 
     <p:column style="width: 34%; text-align: center;"> 
      <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check"/> 
     </p:column> 
     <p:column style="width: 33%; text-align: center;"> 
      <p:graphicImage id="gi2" styleClass="ui-icon ui-icon-bookmark"/> 
     </p:column> 
     <p:column style="width: 33%; text-align: center;"> 
      <p:graphicImage id="gi3" styleClass="ui-icon ui-icon-tag"/> 
     </p:column> 
    </p:row> 
</p:panelGrid> 

Answer 1

、私は解決策を作ってみました。

（P：カラム）この場合、主な問題は、セル内の配置を設定する方法はないように思われる：中心スタイル= "テキストALIGNと（提案された方法のいずれかで行うことができ、 ; "またはstyle =" margin：0px auto; "）。 graphicImageはがstyleClassの= "UI-アイコンUI-アイコン-..."があります。ここ

主な問題は、Pということです。そのstyleClassがなければ（画像ソースを指定するのにsrc = "..."を使用して）、セルの位置合わせは問題なく適用されます。

styleClassのIF =「UI-アイコンUI-アイコン-...」は、それがpに対して追加のスタイルを指定するために必要なのは、使用する必要があります：graphicImageははそれに対処するために、このスタイルがスタイルです= "表示：ブロック;余白：0px自動;。

<p:panelGrid id="pgIcons" style="width: 100%;"> 
    <p:row> 
     <p:column style="width: 50%; text-align: center;"> 
      <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check" 
       style="display: block; margin: 0px auto;"/> 
     </p:column> 
     <p:column style="width: 50%; margin: 0px auto;"> 
      <p:graphicImage id="gi2" styleClass="ui-icon ui-icon-bookmark" 
       style="display: block; margin: 0px auto;"/> 
     </p:column> 
    </p:row> 
</p:panelGrid> 

Answer 2

<p:column styleClass="centered"> 
    <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check"/> 
</p:column> 

CSS 

.centered td { 
    margin: 0px auto; 
}