css - 在右边放置一个命令按钮

Question

我正在使用 jsf2.2 primefaces 6.0，我已经实现了一个图形解决方案，可以通过 primefaces 的 galleria 组件查看、下载和打印图片。

问题是我需要帮助将打印 commandButton 放在右侧以获得最佳人体工程学结果。

这是想要的结果:

这里是 XHTML 代码:

<p:dialog header="Documents numérisés" widgetVar="diag" modal="true"
                dynamic="true" showEffect="fade" hideEffect="fade" resizable="true"
                position="center" id="diagImages" onShow="download()">
                <p:outputPanel id="gal" style="text-align:center;">
                    <p:galleria value="#{demandeBean.demandeSelectionnee.images}"
                        panelWidth="500" panelHeight="313" showCaption="false"
                        autoPlay="false" var="image">
                        <p:graphicImage id="image"
                            value="http://localhost:18080/openCars/images/#{image}"
                            width="500" height="313" />
                    </p:galleria>
                </p:outputPanel>
                <p:commandButton value="Print" type="button" icon="ui-icon-print" 
                    style="display:block;margin-bottom: 20px">
                    <p:printer target="image" />
                </p:commandButton>
            </p:dialog>

Answer 1

好吧，这可能不是一个完美的解决方案，但它对我有用。

<p:panelGrid>
<p:commandButton value="Print" type="button" icon="ui-icon-print"
style="float:right;">
<p:printer target="image" />
</p:commandButton>
<p:panelGrid>