I attempted to center my <apex:commandButton> with <div align="center"> but it places it sort of between the center and the right side instead. Why might this be?

enter image description here

VF Markup snippet

          <!--Submit button-->
      <!--PageBlock starts-->
      <apex:pageBlockButtons location="top">
      <div align="center">
            <apex:commandButton action="{!save}" value="Submit Referral"/>
      <div style="text-align:center">
      <p>By clicking this button, you are agreeing to start the registration process.</p>
    <!--PageBlock ends-->

1 Answer 1


The default apex:pageBlock header includes a "title", even if you don't include a title. Thus, the buttons are centered, but with space for a title. To get it absolutely centered, you need to override the entire header:

 <apex:facet name="header">
  <div class="text-align: center">
   <apex:commandButton value="Whatever" action="{!whatever}" />
  • Awesome. Thanks again Salesforce.com fox! Oct 15, 2020 at 19:50
  • Edit: My button is gone. Do I need to use <apex:pageBlockButtons> tag? Oct 15, 2020 at 19:57
  • 2
    @patriciajlim Hmm, I was able to replicate this issue. I'm not sure if this is a bug. As a work around, use a normal button (with an action function): <apex:actionFunction name="whatever" action="{!serverActionName}" /><button onclick="whatever(); event.preventDefault();">Save</button>
    – sfdcfox
    Oct 15, 2020 at 20:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .