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
Zoom_VZoom_V 

How to center OutputText on a Visualforce page

I am attempting to put a text message just above the buttons of some of the records which will indicate to the user that something is still needed in order to Submit his request. For some reason my text will not center properly. I thought maybe it was because I am trying to do it at the very top of the record, and maybe that was impossible in that section. But I tried moving it to other parts of the record and it wouldn't work either.

Here is the top portion of the VisualForce code which contains my style and outputtext :
  
<apex:page standardcontroller="Product_Review__c">

    <head>     
     <style >
        .italicText 
        { 
            font-style: italic; 
            font-weight: bold
            font-size: 24px;
            text-align:center;
            width :100%;
        }                   
     </style>
    </head>

<apex:messages />

    <apex:sectionheader title="{!$ObjectType.Product_Review__c.label} Detail" subtitle="{!Product_Review__c.Name}"/>
    <chatter:feedwithfollowers entityId="{!Product_Review__c.Id}"/>
    <apex:form >
    <apex:outputtext style="text-align:center; width : 100%;font-size: 16px; font-weight: bold ;  color : #FF0000" value="{!Product_Review__c.Docs_Still_Needed__c}" rendered="{!IF(Product_Review__c.Docs_Still_Needed__c = '', false, true)}" />
        <apex:pageblock mode="maindetail" title="{!$ObjectType.Product_Review__c.label} Detail">
            <apex:pageblockbuttons >
                <apex:commandbutton value="Edit" action="{!Edit}"/>
                <apex:commandbutton value="Delete" action="{!Delete}"/>
                <apex:commandButton value="Submit for Approval" action="{!URLFOR($Action.Product_Review__c.submit, Id)}" id="Submit_for_Approval" rendered="{!IF(Product_Review__c.Status__c = 'Approved', false, true)}"/>

            </apex:pageblockbuttons>

The align:center attribute in the outputtext line is having no effect. The rest of the attributes such as font size and color are working properly.

Any idea what I'm doing wrong here ?

Thank you for your help.
Best Answer chosen by Zoom_V
Alex SelwynAlex Selwyn
Styling conflicts with default salesforce styles are always a pain.

Try wrapping the outputtext inside a div, see if that helps.

<div style="text-align:center;font-size: 25px;">
               <apex:outputText value="Preview and Test" /> 
           </div>

All Answers

Alex SelwynAlex Selwyn
Styling conflicts with default salesforce styles are always a pain.

Try wrapping the outputtext inside a div, see if that helps.

<div style="text-align:center;font-size: 25px;">
               <apex:outputText value="Preview and Test" /> 
           </div>
This was selected as the best answer
Zoom_VZoom_V
That did the trick Alex. Thank you !