如何居中对齐<p:rating>

Question

我在我的jsf2primeface应用程序中使用了<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>

有什么线索吗？

Answer 1

因为p:rating为每个星星渲染divs，并且它们是浮动的，所以主div没有大小。以下是实现目标的一种方法：

CSS :

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

视图:

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