HTML table does not let me change table position to center when rendering as PDF

Question

I'm trying to display my HTML table in the center of the page when rendering it as pdf. When I render as HTML it works as expected so I assume that CSS properties for alignment doesn't work properly in pdf. Any help on this is appreciated!

My VF Component is embedded in a VF page as below:-

**COMPONENT**
table.heatmapWrapper{
    border-collapse: collapse;
    width: 500px;
    height: 500px;
    table-layout: auto;
    text-align:c

    <apex:form >
            <apex:outputPanel layout="none">
            <div style="text-align:center; width:100%;" >
            <table class="heatmapWrapper" text-align="center"> <!--style="/*width:{!width}; height:{!height};*/margin: 0 auto !important;"-->

**VF PAGE**
<apex:outputPanel layout="none" rendered="{!showAggregatedHeatMap}">
           <!--  <div style="page-break-after:always;"></div> -->
            <c:DrawHeatmap heatmap="{!heatmap}" safeMode="true" height="500px" width="100%" disableRiskList="true" showRiskIds="true"/>
        </apex:outputPanel>

Answer 1

The PDF render engine doesn't like inline styles and if you are using css styles, you need create a static resource with the .css and in the visualforce load de css

<apex:stylesheet value="{!URLFOR($Resource.MYStyless, 'vfStyles.css')}"/>

Answer 2

You have several issues going on with your code. The first thing I immediately see is that you're using the <apex:form> tag which is on the list of Components That Are Unsafe to Use When Rendering as PDF. See Component Behavior When Rendered as PDF in the VF Developer's Guide for a complete list of "Safe", "Use with Caution" and "Unsafe" Visualforce components.

You've not included all of the code for your entire page, so I can't say all of what else might be going on. But, I don't see an align:center in the table.heatmapWrapper CSS. The only align:center callouts I see are all related to text. I can also say that the Render Engine doesn't support any CSS 3, instead only CSS 2.1. `