0

In my code below, I am trying to align the command button inside a pageblock section using style - float:center. But I am unable to move the button to center. But when I use float:right , the button moves to the right. What am I missing here, any advice?

<apex:pageBlockSection title="Additional Interviewers" columns="1">
<apex:outputPanel layout="none">
<apex:commandButton action="{!addInterviewer}" value="Add/Remove Interviewers" id="addInt" style="float:center"/>
</apex:outputPanel>
<apex:pageBlockTable value="{!additInterviewList}" var="addIntrv" title="Additional Interviewers" style="width:100%;">
<apex:column value="{!addIntrv.Interviewer__r.Name}" style="width:20%;"/>
<apex:column value="{!addIntrv.interviewer__r.Associate_Id__c}"/>
<apex:column value="{!addIntrv.interviewer__r.Associate_s_Location__c}"/>
<apex:column value="{!addIntrv.Interviewer__r.Email__c}"/>

4
  • There is no such thing as float: center- w3schools.com/cssref/pr_class_float.asp
    – Eric
    Nov 11 '16 at 1:24
  • @Eric I got the reference of float:center from - developer.salesforce.com/forums/?id=906F0000000AiwXIAS . Seems like it was incorrect answer there.
    – SfdcBat
    Nov 11 '16 at 17:17
  • Little hint, don't treat code from questions posted on boards requesting help as being valid :o - Look at the answers instead....(Especially when the question is almost the same as yours :)
    – Eric
    Nov 11 '16 at 17:28
  • Yea, I figured that :) It's not correct always.
    – SfdcBat
    Nov 11 '16 at 17:30
4

There's no such CSS value for "float" of "center." If you want your commandButton to be in the middle of the area, you should do something like this:

<div style="text-align: center">
    <apex:commandButton ... />
</div>

Edit: You have to also wrap the item inside a pageBlockSectionItem. Here's a demo page that works.

<apex:page >
    <apex:form>
        <apex:pageBlock title="Title">
            <apex:pageBlockSection title="Subtitle" columns="1">
                <apex:pageBlockSectionItem>
                    <apex:outputPanel>
                        <div style="text-align: center">
                            <apex:commandButton value="Value" />
                        </div>
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
5
  • Different explanation than the comment I deleted, but the edit made the answer much better. :)
    – crmprogdev
    Nov 10 '16 at 18:05
  • @sfdcfox I tried this and for some reason I still see the commandbutton towards left. Not sure why :(
    – SfdcBat
    Nov 10 '16 at 18:10
  • @SfdcBat The button was getting put into the "label" column of the pageBlockSection. I got this to work by wrapping it in some more elements. Take a look at my update.
    – sfdcfox
    Nov 10 '16 at 18:17
  • Thanks. If I use apex:pageBlockSectionItem , my pageblocktable moves to the right and the button appears in the left. It looks distorted,
    – SfdcBat
    Nov 10 '16 at 18:37
  • @SfdcBat The button and table each need to be their own pageBlockSectionItem.
    – sfdcfox
    Nov 10 '16 at 18:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.