title: HTML layout is messed up in Microsoft Outlook E-mail client
body: <p>My application sends an HTML e-mail to users. When I test it as a plain HTML file, it looks ok in various browsers (Firefox, IE, Chrome, Safari, Android phone browsers). It also displays fine in webmail clients that I Have tested (Gmail, Yahoo mail).</p>
  
  <p>But when I view the message in Microsoft Outlook, the layout is messed up. Specifically - the right hand icon is not top aligned, but displayed much lower than the left icon. This is the HTML code:</p>
  
  <pre><code>&lt;div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF"&gt;
     &lt;!-- Logos --&gt;
         &lt;div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px"&gt;
             &lt;a href="http://mywebsite.com" target="_blank" style="color: #333; "&gt;&lt;img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0"&gt;&lt;/a&gt;
             &lt;a href="mailto:?subject='.$email_subject.'&amp;body='.$email_body.'" style="color: #333"&gt;&lt;img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0"&gt;&lt;/a&gt;
         &lt;/div&gt;
     &lt;!-- Title --&gt;
         &lt;div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;"&gt;
             &lt;span style="font-size:12px; padding-left: 2px; font-weight: bold;"&gt;Comment line - should be left aligned&lt;/span&gt;
         &lt;/div&gt;
         &lt;div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;"&gt;
             &lt;span&gt;&lt;b&gt;My Title Should Be Centered&lt;/b&gt;&lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>