Visualforce – Align Columns To Right

Sometimes there is a need to align(float) few of the columns of datatable to right for eg., List Price in Opportunity Products page functionality is shown in right aligned style.

In those cases, use following piece of snippet to render the column header and column values in right aligned manner

<apex:column width="23%">
<apex:facet name="header" >
<apex:outputPanel id="datePanel" style="float:right;">Role</apex:outputPanel>
</apex:facet>
<apex:OutputLink style="float:right;" target="_blank" value="/{!UserRoleName}">{!UserRole.Name}</apex:OutputLink>
</apex:column>

Highlighted in above code are two different approaches

  1. Use output panel to enclose set of things and add float:right style attribute to it
  2. Directly add float:right style to the element (in this case OutputLink)
  • vijay

    can anybody please tell me how to align visualforce buttons to the center of the page?

  • Adam

    If I had to guess you’d use:
    style=”margin: auto”
    or on the parent element
    style=”text-align: center”

  • JenniferSimonds

    Thanks for this!