+ Start a Discussion
SFDC coderSFDC coder 

how to align a command button in center?

Hi all,

i am trying to align my command button in center but its not working i have used all the css properties like align and float in my output panel but still its not working

<apex:page controller="VistAudit_VFC" action="{!createData}">
 <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">
 <apex:commandButton value="Save" action="{!save}"/>
 </apex:outputPanel>

</apex:page>

any help would be appreciated

thanks
Best Answer chosen by SFDC coder
Akshay DeshmukhAkshay Deshmukh
Put you commandButton inside div.

like
<div align="center" draggable="false" >
<apex:commandButton value="Save" action="{!save}"/>
</div>


All Answers

Mani RenusMani Renus
<apex:commandButton style="float:centre" value="Save" action="{!save}"/>
Akshay DeshmukhAkshay Deshmukh
Put you commandButton inside div.

like
<div align="center" draggable="false" >
<apex:commandButton value="Save" action="{!save}"/>
</div>


This was selected as the best answer
AnjireddyAnjireddy
Here i have 3 command buttons. And i want to place all those in the  middle. Right now they were at totally left and center and totally right..
So please suggest me to allign those command buttomns in the cente side by side..


Thanks in Advance,
Anji  K..
Kshipra Kankariya 14Kshipra Kankariya 14
Please try following code, it should work.
                    <div align="Center">
                        <apex:outputPanel>
                            <apex:commandButton action="{!<your action>}" value="Button1" id = "btn1" />
                            <apex:commandButton action="{!<your action>}"value="Button2"  id="btn2"/>
                            <apex:commandButton action="{!<your action>}" value="Button3" id="btn3"/>
                        </apex:outputPanel>
                      </div>
AnanimforceAnanimforce
Another solution is to use Custom HTML Attributes (https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_html_features_pass_through_attributes.htm) (HTML5 style) and set the <apex:outputPanel> with an html-align="center" attribute.

Example:
<apex:outputPanel layout="block" html-align="center">
    <apex:commandButton value="Click me!" action="{!someAction}" />
</apex:outputPanel>

 
varun  2varun 2
Try following , it will take care as on standard layouts if you are using page block style.

<apex:pageBlockSection columns="3">
  <apex:outputPanel></apex:outputPanel>
 <apex:outputPanel>Your Buttons Code here</apex:outputPanel>
<apex:outputPanel></apex:outputPanel>
</apex:pageBlockSection/>
varun  2varun 2
<apex:pageBlockButtons> in the pageblock layout
Sandeep YadavSandeep Yadav
You can write it in <center> </center> tag or 
<apex:pageBlockButtons>