how to center align <p:rating>

Question

I am using <p:rating> in my JSF2-PrimeFace application. Find the code below:

<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>

Any clue on this?

Answer 1

Since p:rating render divs for each stars and they are floating, the main div has no size. Here is a way to achieve your goal :

CSS :

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

View :

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