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
Michael Hedrick 2Michael Hedrick 2 

VF page Section Header Title not centering

I am having an issue centering the section header in  VF page.  Its more like off center towards the left side of the VF page.
User-added image

Here is the VF page.  The command buttons centered well but the title is not.  Any suggestions is greatly appreciated. 
<div style="background-color:green;height:500px;width:802px;">
        <apex:form id="Merchandising" >
           <div align="center" >
            <apex:sectionHeader title="Choose Merchandising"/>
            </div>;
                <apex:pageBlock title="">
                    <apex:pageBlockSection columns="2">             
                    <apex:inputField value="{!merch.Merchandise__c}" required="true"/>
                    <apex:inputField value="{!merch.Date_Displayed__c}"/>
                    <apex:inputField value="{!merch.Merchandise_Category__c}" required="true"/>
                    <apex:outputfield value="{!merch.Date_Delivered__c}"  html-disabled="true" />
                    <apex:inputField value="{!merch.Merchandise_SubCategory__c}" required="true"/>                
                    <apex:inputField value="{!merch.Date_Removed_Replaced__c}"/>
                </apex:pageBlockSection>
            
                <Br></Br><Br></Br><Br></Br>            
                <div align="center" draggable="false" >
            
                <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
                &nbsp;&nbsp;&nbsp;&nbsp;
                <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>

 
Best Answer chosen by Michael Hedrick 2
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
Hi @Michael Hedrick try some thing like below, I would recommend try to divide the div for header instead of inline style for the entire form
  
<apex:page >
    <style>
        #ct{
        text-align:center;
        font-size: xx-large;
        }
    </style>
    <apex:form id="Merchandising" >
        <div id="ct">
            <h>Choose Merchandising</h>
        </div>
        
        
        <apex:pageBlock title="">
            <apex:pageBlockSection columns="2">             
                
            </apex:pageBlockSection>
            
        </apex:pageBlock>
        <div align="center" draggable="false" >
            
            <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
            &nbsp;&nbsp;&nbsp;&nbsp;
            <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
        </div>
    </apex:form>
    
</apex:page>

let me know if this solves, choose this answer as best answer.

Thank you!

All Answers

Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
Hi @Michael you can use some thing like below, for some reason section header is not aligning to centre in the div 
<apex:page >
    <style>
        #ct{
        text-align:center;
        }
    </style>
    <apex:form id="Merchandising" >
        <div id="ct">
            <h1>Choose Merchandising</h1>
        </div>
        
        
        <apex:pageBlock title="">
            <apex:pageBlockSection columns="2">             
                
            </apex:pageBlockSection>
            
        </apex:pageBlock>
        <div align="center" draggable="false" >
            
            <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
            &nbsp;&nbsp;&nbsp;&nbsp;
            <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
        </div>
    </apex:form>
    
</apex:page>

please choose this as best answer if this resolves what you are trying to do.


Thank you!
Michael Hedrick 2Michael Hedrick 2
Hello Akhilesh,
Thank for the recommendation.  I already had a style in the page so I added the text-align:center to it and it now looks like this: 
<div class="content" style="background-color:green;font-size:15px;text-align:center;height:300px;width:800px;">
        <apex:form id="Merchandising" >    
            <h1>Choose Merchandising</h1>        
                <apex:pageBlock title=""

Not using the sectionheader reduced the hieght of the header. Can the head height be made larger?
User-added image

Thank you.
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
Hi @Michael Hedrick try some thing like below, I would recommend try to divide the div for header instead of inline style for the entire form
  
<apex:page >
    <style>
        #ct{
        text-align:center;
        font-size: xx-large;
        }
    </style>
    <apex:form id="Merchandising" >
        <div id="ct">
            <h>Choose Merchandising</h>
        </div>
        
        
        <apex:pageBlock title="">
            <apex:pageBlockSection columns="2">             
                
            </apex:pageBlockSection>
            
        </apex:pageBlock>
        <div align="center" draggable="false" >
            
            <apex:commandButton action="{!save}" value="Save" id="saveButton" reRender="Panel" />        
            &nbsp;&nbsp;&nbsp;&nbsp;
            <apex:commandButton value="Cancel" onclick="window.close();" immediate="true"/>
        </div>
    </apex:form>
    
</apex:page>

let me know if this solves, choose this answer as best answer.

Thank you!
This was selected as the best answer
Michael Hedrick 2Michael Hedrick 2
Hey Akhilesh,
Thank you for your help.  I am using the style for the entire page because it allows me to color the background at the top and bottom of the page..
But I seperated the style you recommended which centered the header and increased the font size.
User-added image 
<style>
        #ct{
        text-align:center;  
        font-size: xx-large;
        }
        
        </style>
    
        <div style="background-color:green;height:330px;width:802px;">
            <apex:form id="Merchandising" >
            <div id="ct">
                <h>Choose Merchandising</h>
            </div>
   
                <apex:pageBlock title="" >  
                    <apex:pageBlockSection columns="2">

Now if I can remove the address bar and disable the save button after the first click I will be set. 
Cheers,
M