+ Start a Discussion
David ZhuDavid Zhu 

How to center Outputpanel in a cell?

I have difficulty to center outputpanel component in a cell. It keeps left alighed. Please advise.

 
<tr>
        <td id = "tcen" colspan="3">
            
            <apex:outputPanel layout="block"  id ="p1">
                <apex:datatable value="{!ZeroSaleProducts}" var="sales" columns="1" rendered="{!(DateSelectionError = false)}">
                <apex:column >
                    <hr/><apex:outputtext value="{!sales.name}" styleClass="productTextStyle"/>
                </apex:column>
                </apex:datatable>
            </apex:outputPanel>
            
        </td>
    </tr>

 
Pramodh KumarPramodh Kumar
Hi David,

Please use this below code.
<tr>
        <td id = "tcen" colspan="3">
            
            <apex:outputPanel layout="block"  id ="p1">
                <apex:datatable value="{!ZeroSaleProducts}" var="sales" columns="1" rendered="{!(DateSelectionError = false)}">
                <apex:column >
                    <hr/>
                         <div align="center">
                               <apex:outputtext value="{!sales.name}" styleClass="productTextStyle"/>
                        </div>
                </apex:column>
                </apex:datatable>
            </apex:outputPanel>
            
        </td>
    </tr>

Thanks,
pRAMODH.
David ZhuDavid Zhu
Hi PRamodh,
It actually center-aligned the text not outputpanel or datable component.
Pramodh KumarPramodh Kumar
Please use this
<tr>
        <td id = "tcen" colspan="3">
            
            <apex:outputPanel layout="block"  id ="p1" style="text-align:center;">
                <apex:datatable value="{!ZeroSaleProducts}" var="sales" columns="1" rendered="{!(DateSelectionError = false)}">
                <apex:column >
                    <hr/>
                         <div align="center">
                               <apex:outputtext value="{!sales.name}" styleClass="productTextStyle"/>
                        </div>
                </apex:column>
                </apex:datatable>
            </apex:outputPanel>
            
        </td>
    </tr>
Thanks,
pRAMODH.
David ZhuDavid Zhu
Finally,​I accomplished this by using the following code. Thanks PRamodh  for your help.
<div align="center" draggable="false">
                    <apex:outputPanel id="theNavBtnPanel">
                           
                          ..............

                    </apex:outputPanel>
                </div>