title: I can't get the panels within my panel to center
body: <p>They all appear left aligned. I've tried setting the body tag to text-align:center, making divs around and in the main panel, but I can't get it to work. Any ideas?</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>.MainPanel {
      background-color:#ccccff;
      margin-bottom:10px;
      margin-top:10px;
  }
  
  .MainPanel  div {
      margin-bottom:10px;
      margin-top:10px;
  }
  
  .panelSpace {
      margin-bottom:25px;
      margin-top:25px;
  }
  
  .buttonWidth { clear: both; }
  
  .buttonWidth  div {
      width:17%;
      float:left;
      margin-left:20px;
  }
  
  .centerDiv {
      width:100%;
      text-align:center;
  }
  </code></pre>
  
  <p>And here's my html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div style="height:100px; text-align:center;"&gt;&lt;uc1:Header ID="Header1" runat="server" /&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;
  
          &lt;div&gt;
              &lt;div&gt;&lt;asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /&gt;&lt;/div&gt;
              &lt;asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px"&gt;
              &lt;div class="centerDiv"&gt;
                  &lt;div&gt;
                      &lt;asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" &gt;
                      &lt;div&gt;Customer:&amp;nbsp;&lt;asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /&gt;&lt;/div&gt;
                      &lt;/asp:Panel&gt;
                  &lt;/div&gt;
  
                  &lt;span class="panelSpace" /&gt;
  
                  &lt;asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" &gt;
                      &lt;div&gt;
                          &lt;div class="buttonWidth"&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
                                                   Width="50px" Height="50px" OnClick="imgDataSync_Click" /&gt;       
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblEDI" runat="server" Text="EDI" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
                                                   Height="50px" OnClick="imgEDI_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
                                                   Width="50px" Height="50px" OnClick="imgShipping_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
                                                   Width="50px" Height="50px" OnClick="imgCompliance_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblLabels" runat="server" Text="Labels"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
                                                   Width="50px" Height="50px" OnClick="imgLabels_Click" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="buttonWidth"&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
                                                   Height="50px" OnClick="imgManuals_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblPackaging" runat="server" Text="Packaging" /&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
                                                   Width="50px" Height="50px" OnClick="imgPackaging_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblTesting" runat="server" Text="Testing"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
                                                   Height="50px" OnClick="imgTesting_Click" /&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                                  &lt;asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
                                                   Height="50px" OnClick="imgShippingQuickReference_Click" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/asp:Panel&gt;
  
                  &lt;span class="panelSpace" /&gt;
  
                  &lt;asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" &gt;
                      &lt;div&gt; 
                          &lt;h2&gt;Recent&amp;nbsp;Updates:&lt;/h2&gt;
                          &lt;asp:GridView ID="grdHistory" runat="server"&gt;...&lt;/asp:GridView&gt;
                          &lt;asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
                                              TableName="Histories" OrderBy="CreatedDate desc" /&gt;
                      &lt;/div&gt;
                  &lt;/asp:Panel&gt;
  
                  &lt;span class="panelSpace" /&gt;
  
              &lt;/div&gt;
              &lt;/asp:Panel&gt;
          &lt;/div&gt;            
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>