Css 如何居中对齐<；p：评级>；

我正在JSF2 PrimeFace应用程序中使用

。找到下面的代码：

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

---

有什么线索吗？

因为

p:rating

为每个星星渲染

div

s，并且它们是浮动的，所以主

div

没有大小。以下是实现目标的方法：

CSS:

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

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

查看：

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

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

@Abhishek我安装了PrimeFaces，只是为了让您测试一个解决方案！见编辑后的答案。：）这个答案很好，但我们可以补充一个解释，说96px是6颗星的全宽。因此，如果您不想使用6颗星，而是使用更少的星，您可以将宽度更改为n*16px，以获得一个与n颗星数对齐的p:rating center。