如何居中對齊<p:rating>

我在我的JSF2-PrimeFace應用程序中使用<p:rating>。找到下面的代碼：如何居中對齊<p:rating>

<p:panel id="popular_offers_panel" style="width: 97%" styleClass="remove-PF-border panel-grid tr panel-grid td panel-header-title-medium">               
    <p:dataGrid id="popular_offers_data_grid" var="offer" value="#{HmBen.offersList}" columns="3" paginatorAlwaysVisible="false" styleClass="no-border-for-component">                                            
     <h:link title="#{msg._offer_on}#{msg._colon} #{offer.tag}" outcome="offer_details?offer=#{offer.seoURL}">                                   
      <p:panel id="popular_offers_details_panel" header="#{offer.where}" styleClass="panel-content-central-horizontal small-panel panel-grid tr panel-grid td panel-hover panel-header-title-small"> 
       <p:panelGrid columns="1" style="text-align: center"> 
        <div class="component-spacing-top"/> 
        <h:graphicImage alt="#{offer.where}" value="#{offer.imgFullPath}" class="small-panel-image" /> 
        <p:rating value="#{offer.rating}" readonly="true" />                      

        <p:panel styleClass="remove-PF-border"> 
         <h:outputText value="#{offer.what}" rendered="#{offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold default-font-color" /> 
         <h:outputText value="#{offer.discount}" rendered="#{offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" /> 
         <sup> 
          <h:outputText value="#{msg._expiring_soon}" rendered="#{offer.isExpiringSoon}" styleClass="font-size-0-8em default-contrast-font-color" /> 
          <h:outputText value="#{msg._this_offer_might_have_expired}" rendered="#{offer.isMightHaveExpired}" styleClass="font-size-0-8em default-contrast-font-color" /> 
          <h:outputText value="#{msg._this_offer_has_expired}" rendered="#{offer.isExpired}" styleClass="font-size-0-8em default-contrast-font-color" /> 
         </sup>                                                                
        </p:panel> 
       </p:panelGrid> 
      </p:panel>                                               
     </h:link>                                               
    </p:dataGrid>                 
</p:panel>

任何線索？

來源

2013-05-29 Abhishek Dhote

由於p:rating渲染div s爲每個星星，他們漂浮，主div有沒有大小。這裏是一個方式來實現自己的目標：

CSS：

.center-rating 
{ 
    width: 96px; 
    margin: 0 auto; 
}

查看：

<p:rating value="#{offer.rating}" readonly="true" styleClass="center-rating" />

來源

2013-05-29 07:30:05

感謝您的快速回復，但它不工作..... –

@阿布舍克我已經安裝PrimeFaces只爲你測試一個解決方案！見編輯的答案。 :) –

是的，它的工作感謝百萬Alexandre Lavoie :) –

如何居中對齊<p:rating>

回答

相關問題