function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RIteshMRIteshM 

How to Align the apex:image to centre

i am building a visualforce page in that i have to align the apex:image to centre in the table column here is my code

 

<apex:column id="column" onclick="if('{!describe.allFields[fname].isWritable}'=='false') return false; selectSingleField('{!obj['Id']}','{!fname}');"
styleClass="{!IF(describe.allFields[fname].isWritable,'writable','notWritable')}">

<!-- object header (button to make the object master) -->
<apex:facet name="header">

<apex:outputPanel style="text-align:center !important;">
<apex:variable var="cIndex" value="{!IF(cIndex=MaxRecordsCount,0,cIndex+1)}"/>
{!sObjectType} {!TEXT(cIndex)}

<br/>
<apex:outputLink id="state" rendered="{!ISBLANK(obj['Id'])=false}" onclick="selectMaster('{!obj['Id']}'); return false;">

<apex:outputText id="imageSetMaster" title="Set as master record" style="display:{!IF(masterObjectId=obj['Id'],'none','block')};" value="Select Survivor"/>
<apex:image id="imageMaster" value="/img/msg_icons/confirm24.png" title="Master record" style=" margin: 0 auto !important;display:{!IF(masterObjectId=obj['Id'],'block','none')};"/>

</apex:outputLink>
<br/>
<script>
//saves id of the images
if("{!obj['Id']}" != '')
{
masterImage["{!obj['Id']}"] = (esc('{!$Component.imageMaster}'));
setMasterImage["{!obj['Id']}"] = (esc('{!$Component.imageSetMaster}'));
}
</script>
</apex:outputPanel>

</apex:facet>

<apex:outputPanel >

<!-- this input field is needed to know which field is choosen and of what object -->
<apex:inputHidden rendered="{!describe.allFields[fname].isWritable && ISBLANK(obj['Id'])==false && ISNULL(selectedObjFields[obj['Id']])==false}"
value="{!selectedObjFields[obj['Id']][fname].isChecked}"
id="selectedField"/>

<script>
if("{!obj['Id']}" != "")
{
//handles massive click (array of component ID based on object Id and field name)
if(fields["{!obj['Id']}"]==null)
{
fields["{!obj['Id']}"] = new Array();
fieldsInput["{!obj['Id']}"] = new Array();
}
//if the field is not writable, it should not be selected
if('{!describe.allFields[fname].isWritable}'=='true')
{
fields["{!obj['Id']}"]['{!fname}'] = (esc('{!$Component.column}'));
fieldsInput["{!obj['Id']}"]['{!fname}'] = (esc('{!$Component.selectedField}'));
}
//if selected, change the style class
if("true"== jQuery(fieldsInput["{!obj['Id']}"]['{!fname}']).val()) selectSingleField('{!obj['Id']}','{!fname}');
}
</script>

<apex:outputField value="{!obj[fname]}" rendered="{!obj[fname]!=null}"/>


</apex:outputPanel>
</apex:column>

 

the only thing that i want to align apex:img to center in the table column i tried some trick of css but neither working any clue how to do this ??

Starz26Starz26

What if you wrap the image in a div and set the left and right margin to auto?

Georgi AtanasovGeorgi Atanasov
Hello RIteshM,

This is how it worked for me:
<div style="text-align:center;">
                <apex:image />
</div>