Centralize components

Question

The print below is from the confirmation of a record of my datatable, the popup is opened when you click on the delete record button:

The code of this dialog is as follows::

<p:commandButton icon="ui-icon-trash" action="#{geracaomb.excluir(linha)}" ajax="true" process="@this" update="pesquisa">
    <p:confirm header="#{msg['cabecalho.apagar.registro']}" message="#{msg['apagar.registro']}" icon="ui-icon-alert" />
    </p:commandButton>
    <p:confirmDialog global="true" showEffect="exploud" hideEffect="fade">
    <p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
    <p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
    </p:confirmDialog>

I want to put the title (CONFIRMATION) and the 2 buttons (Yes and No) centered, as I do it?

Answer 1

Method 1 (without changing the CSS):

I don’t know if it is possible to center the title without touching the CSS, but the buttons can do:

<p:confirmDialog global="true" showEffect="explode" hideEffect="fade">
    <div style="display:flex;justify-content:center;align-items:center;">
        <p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
        <p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
    </div>
</p:confirmDialog>

Method 2 (customizing Primefaces CSS):

There are several ways to customize CSS, below follows an example of CSS customization on the page itself, using the tag <style>. In this case, there would be no changes to your Confirmdialog, all changes would be in CSS:

<style>
.ui-dialog-title {
    width: 88%;
    display: flex;
    justify-content: center;
    margin-right: 0 !important;
}
.ui-dialog-buttonpane {
    display:flex;
    justify-content:center;
    align-items:center;
}
</style>

It may be necessary to adjust the values of width and margin-right for your project, but only by testing. Follow the list of other Style Class of Confirmdialog:

• .ui-dialog Container element of dialog
• .ui-dialog-Titlebar Title bar
• .ui-dialog-title Header text
• .ui-dialog-Titlebar-close Close icon
• .ui-dialog-content Dialog body
• .ui-dialog-buttonpane Footer button panel