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
Kakasaheb EKKakasaheb EK 

How to align commandbutton to center.??

Hi All,
I am unable to align a save button to center ; I tried using these option
 1.used div block with css.
 2.location=bottom using apex.
 3.tryied using css as well 

Code :-

<apex:page standardController="Account">
 <apex:form>
  <apex:pageBlock>
    <apex:pageblocksection columns="1"> 
                  <apex:commandbutton id="btnCenter" value="Save" Action="{!save}" /> 
  </apex:pageblocksection>   
   </apex:pageBlock>    
  </apex:form>   
</apex:page>

I want button align center only in apex:pageblocksection

Please adivise,

Kakasaheb.
DebasisDebasis
HI Kakasaheb,

please use below code, using div tag instead of using pageblocksection for commandbutton,  
<apex:page standardController="Account">
 <apex:form >
  <apex:pageBlock >
    <div style="text-align:center">
                  <apex:commandbutton id="btnCenter" value="Save" Action="{!save}" /> 
  </div> 
   </apex:pageBlock>    
  </apex:form>   
</apex:page>
result:
User-added image
please let me know if it helps you
Mahesh DMahesh D
Hi Kakasaheb,

Please find the below modified code:

Here I considered:

(1) Didn't use HTML code.
(2) Alignment.
(3) Tested the solution in my DE environment and looks good.
  
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock >
            <apex:pageBlockSection columns="1" >
                <apex:pageBlockSectionItem dataStyle="text-align:center;">
                    <apex:commandbutton id="btnCenter" value="Save" Action="{!save}" /> 
                </apex:pageBlockSectionItem>
          </apex:pageblocksection>   
       </apex:pageBlock>    
    </apex:form>   
</apex:page>
Also check the output:

User-added image

Please do let me know if it helps you.

Regards,
Mahesh
JyothsnaJyothsna (Salesforce Developers) 
Hi Kakasaheb,

Please try the below sample code.
  
<apex:page standardController="Account">
 <apex:form >
  <apex:outputLabel value="Audit Visit" style="font-family:Times New Roman;font-size:15px">
 </apex:outputLabel><br></br>
 
<apex:outputPanel style="float:centre">
<div align="center" draggable="false" >
<apex:commandButton value="Save" action="{!save}"/>
</div>
 </apex:outputPanel>
</apex:form>
</apex:page>

Hope this helps you!
Best Regards,
Jyothsna

 
David Catindoy 101David Catindoy 101
You can also enclose the button using the <center></center> tag to make it center-aligned.