function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Patricia LimPatricia Lim 

How to center align button in Visualforce

Hi all. I have a pageBlockSection before the button that specifies 2 columns and I suspect this is why I cannot center my button despite using  
<div align="center">
Here is my VF markup: 
<apex:pageBlock title="Added Participants">
    <apex:pageBlockTable id="people" value="{!allcontacts}" var="participant">
        
        <apex:column headervalue="First Name" value="{!participant.Name}"/> 
        <apex:column headerValue="Last Name" value="{!participant.Last_Name__c}"/>
        <apex:column headerValue="Age" value="{!participant.Age__c}"/>
        <apex:column headerValue="Phone" value="{!participant.Phone__c}"/>
        <apex:column headerValue="Victim/Offender" value="{!participant.Victim_Offender__c}"/>
        <!--Submit button-->
    </apex:pageBlockTable>
           <br/>
           <br/>
      <apex:pageBlock>
      <apex:pageBlockButtons location="bottom">
            <apex:commandButton action="{!save}" value="Submit Referral"/>
          <br/>
          <br/>
        <p>By clicking this button, you are agreeing to start the registration process.</p>
      </apex:pageBlockButtons>
      </apex:pageBlock>
        <div style="text-align:center">
      <p>© 2020. All rights reserved.</p>
      </div>
    </apex:pageBlock>
  </apex:form>
</apex:page>
Advice is appreciated
 
ShirishaShirisha (Salesforce Developers) 
Hi Patricia,

Greetings!

The below sample code should work in your visualforce page:
  
<div align="center" draggable="false" >
<apex:commandButton value="Save" action="{!save}"/>
</div>

Kindly mark it as best answer if it helps so that it can help others in the future.

Warm Regards,
Shirisha Pathuri