Update docs and examples to use center tag for Outlook.com

diff --git a/docs/examples/basic-grid.html b/docs/examples/basic-grid.html
index 7c004fd3a3f781380299388b76cc23556c6b5406..69dc8aaf79a381795511f67bc67c76493cabe903 100644 (file)
--- a/docs/examples/basic-grid.html
+++ b/docs/examples/basic-grid.html
@@ -19,49 +19,51 @@
   <table class="body">
     <tr>
       <td class="center" align="center" valign="top">
+        <center>
 
 
-        <!-- EXAMPLE CODE -->
+          <!-- EXAMPLE CODE -->
 
-        <table class="container" style="background:purple;">
-          <tr>
-            <td style="padding-top: 10px; padding-bottom: 10px;">
+          <table class="container" style="background:purple;">
+            <tr>
+              <td style="padding-top: 10px; padding-bottom: 10px;">
 
-              <table class="row" style="background:green;">
-                <tr>
-                  <td class="wrapper">
+                <table class="row" style="background:green;">
+                  <tr>
+                    <td class="wrapper">
 
-                    <table class="eight columns" style="background:pink;">
-                      <tr>
-                        <td>
-                          Eight Columns
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
+                      <table class="eight columns" style="background:pink;">
+                        <tr>
+                          <td>
+                            Eight Columns
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
 
-                  </td>
-                  <td class="wrapper last">
+                    </td>
+                    <td class="wrapper last">
 
-                    <table class="four columns" style="background:pink;">
-                      <tr>
-                        <td>
-                          Four Columns
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
+                      <table class="four columns" style="background:pink;">
+                        <tr>
+                          <td>
+                            Four Columns
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
+                    </td>
+                  </tr>
+                </table>
 
-            </td>
-          </tr>
-        </table>
+              </td>
+            </tr>
+          </table>
 
-        <!-- END EXAMPLE CODE -->
+          <!-- END EXAMPLE CODE -->
 
+        </center>
       </td>
     </tr>
   </table>

diff --git a/docs/examples/center-class.html b/docs/examples/center-class.html
index 853622520cd97f5083d46ad370422d4ad92da10a..2586cd419f55b20ac8ee8c1128a850e23b807dac 100644 (file)
--- a/docs/examples/center-class.html
+++ b/docs/examples/center-class.html
@@ -19,52 +19,60 @@
   <table class="body">
     <tr>
       <td class="center" align="center" valign="top">
+        <center>
 
 
-        <!-- EXAMPLE CODE -->
+          <!-- EXAMPLE CODE -->
 
-        <table class="container">
-          <tr>
-            <td>
+          <table class="container">
+            <tr>
+              <td>
+                
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
 
-              <table class="row">
-                <tr>
-                  <td class="wrapper">
+                      <table class="six columns">
+                        <tr>
+                          <td class="center panel">
+                            <center>
 
-                    <table class="six columns">
-                      <tr>
-                        <td class="center panel">
-                          Centered content 
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
+                              Centered content 
 
-                  </td>
-                  <td class="wrapper last">
+                            </center>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
 
-                    <table class="six columns">
-                      <tr>
-                        <td class="center panel">
+                    </td>
+                    <td class="wrapper last">
 
-                          <!-- Centered image -->
-                          <img class="center" src="http://placehold.it/125x125&text=Centered%20Image">
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
+                      <table class="six columns">
+                        <tr>
+                          <td class="center panel">
+                            <center>
 
-                  </td>
-                </tr>
-              </table>
+                              <!-- Centered image -->
+                              <img class="center" src="http://placehold.it/125x125&text=Centered%20Image">
 
-            </td>
-          </tr>
-        </table>
+                            </center>
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
 
-        <!-- END EXAMPLE CODE -->
+                    </td>
+                  </tr>
+                </table>
 
+              </td>
+            </tr>
+          </table>
+
+          <!-- END EXAMPLE CODE -->
+        
+        </center>
       </td>
     </tr>
   </table>

diff --git a/docs/examples/even-columns.html b/docs/examples/even-columns.html
index cee16f929f9d42c88bb3d4b98189fdda0f690bb7..1ae9e3d0cd39d9e552b61f214ee8a29825013408 100644 (file)
--- a/docs/examples/even-columns.html
+++ b/docs/examples/even-columns.html
@@ -19,180 +19,181 @@
   <table class="body">
     <tr>
       <td class="center" align="center" valign="top">
+        <center>
+
+          <!-- EXAMPLE CODE -->
+
+          <table class="container">
+            <tr>
+              <td>
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper last">
+
+                      <table class="twelve columns">
+                        <tr>
+                          <td class="panel">
+
+                            twelve.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
+
+                      <table class="six columns">
+                        <tr>
+                          <td class="panel">
+
+                            .six.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last">
+
+                      <table class="six columns">
+                        <tr>
+                          <td class="panel">
+
+                            .six.columns
+
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
+
+                      <table class="four columns">
+                        <tr>
+                          <td class="panel">
+
+                            .four.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper">
+
+                      <table class="four columns">
+                        <tr>
+                          <td class="panel">
+
+                            .four.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last">
+
+                      <table class="four columns">
+                        <tr>
+                          <td class="panel">
+
+                            .four.columns
+
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+
+                <table class="row">
+                  <tr>
+                    <td class="wrapper">
+
+                      <table class="three columns">
+                        <tr>
+                          <td class="panel">
+
+                            .three.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper">
+
+                      <table class="three columns">
+                        <tr>
+                          <td class="panel">
+
+                            .three.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper">
+
+                      <table class="three columns">
+                        <tr>
+                          <td class="panel">
+
+                            .three.columns
+                          
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                    <td class="wrapper last">
+
+                      <table class="three columns">
+                        <tr>
+                          <td class="panel">
+
+                            .three.columns
+
+                          </td>
+                          <td class="expander"></td>
+                        </tr>
+                      </table>
+
+                    </td>
+                  </tr>
+                </table>
+
+              </td>
+            </tr>
+          </table>
+
+          <!-- END EXAMPLE CODE -->
 
-
-        <!-- EXAMPLE CODE -->
-
-        <table class="container">
-          <tr>
-            <td>
-
-              <table class="row">
-                <tr>
-                  <td class="wrapper last">
-
-                    <table class="twelve columns">
-                      <tr>
-                        <td class="panel">
-
-                          twelve.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                </tr>
-              </table>
-
-              <table class="row">
-                <tr>
-                  <td class="wrapper">
-
-                    <table class="six columns">
-                      <tr>
-                        <td class="panel">
-
-                          .six.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper last">
-
-                    <table class="six columns">
-                      <tr>
-                        <td class="panel">
-
-                          .six.columns
-
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                </tr>
-              </table>
-
-              <table class="row">
-                <tr>
-                  <td class="wrapper">
-
-                    <table class="four columns">
-                      <tr>
-                        <td class="panel">
-
-                          .four.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper">
-
-                    <table class="four columns">
-                      <tr>
-                        <td class="panel">
-
-                          .four.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper last">
-
-                    <table class="four columns">
-                      <tr>
-                        <td class="panel">
-
-                          .four.columns
-
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                </tr>
-              </table>
-
-              <table class="row">
-                <tr>
-                  <td class="wrapper">
-
-                    <table class="three columns">
-                      <tr>
-                        <td class="panel">
-
-                          .three.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper">
-
-                    <table class="three columns">
-                      <tr>
-                        <td class="panel">
-
-                          .three.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper">
-
-                    <table class="three columns">
-                      <tr>
-                        <td class="panel">
-
-                          .three.columns
-                        
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                  <td class="wrapper last">
-
-                    <table class="three columns">
-                      <tr>
-                        <td class="panel">
-
-                          .three.columns
-
-                        </td>
-                        <td class="expander"></td>
-                      </tr>
-                    </table>
-
-                  </td>
-                </tr>
-              </table>
-
-            </td>
-          </tr>
-        </table>
-
-        <!-- END EXAMPLE CODE -->
-
+        </center>
       </td>
     </tr>
   </table>

diff --git a/templates/boilerplate.html b/templates/boilerplate.html
index 039f5d3709ab904b5bcffc2326e55f3ee6345893..dca3d860ef497947d3de9f0fa8e34b7c0c6a09fe 100644 (file)
--- a/templates/boilerplate.html
+++ b/templates/boilerplate.html
@@ -18,9 +18,11 @@
     <table class="body">
       <tr>
         <td class="center" align="center" valign="top">
+          <center>
 
           <!-- Email Content -->
 
+          </center>
         </td>
       </tr>
     </table>