Hi I'm working with a Mail template. Facing some issues with alignment in some versions of Outlook in the icons sections, maybe because of it's Word rendering engine. What alternative solution do we have to make the image align with text in Outlook ?

Icons not aligning with text.

<td style="background:#fff;">
  <h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
  <h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
  <p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
    <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{orderDate}}
  </p>
  <p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
    <img src="https://i.postimg.cc/NffxJGH7/ico-shop2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{storeName}}
  </p>
  <p style="font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
    <img src="https://i.postimg.cc/sf58d2xk/ico-phone2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{storePhone}}
  </p>
  <p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
    <img src="https://i.postimg.cc/4xyBd44N/ico-pin2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{deliveryAddress}}
  </p>
  <p style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:20px 0 10px;letter-spacing: 1.6px;text-align: center;">
    <img src="https://i.postimg.cc/8cv1dgm2/asterisco.png" width="395" height="5" alt="" border="0" style="vertical-align: middle;" />
  </p>

  <table align="center" border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;width:100%;">
    {{#each items}}
    <tr>
      <td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
        x{{quantity}} {{name}}
      </td>
      <td width="35%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;text-align:right;">
         {{price}} €
      </td>
    </tr>
    {{#each modifiers}}
    <tr>
      <td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px 14px;">
        - {{quantity}} {{name}}
      </td>
      <td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
        {{price}}
      </td>
    </tr>
    {{/each}} {{/each}}
    <tr>
      <td colspan="3" style="border-bottom: 1px solid #000000;">&nbsp;</td>
    </tr>
    <tr>
      <td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
        &nbsp;
      </td>
      <td width="35%" style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:10px 0 4px;text-align:right;">
        <strong>{{subTotal}} €</strong>
      </td>
    </tr>
    <tr>
      <td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px">
        Envío
      </td>
      <td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px;text-align:right;">
         {{deliveryCharge}} €
      </td>
    </tr>
    <tr>
      <td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px">
        <strong>TOTAL</strong>
      </td>
      <td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
        <strong>{{total}} €</strong>
      </td>
    </tr>
    <tr>
      <td style="color:#000000;font-size:12px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px">
        <img src="https://i.postimg.cc/sDq36XNt/ico-card2x.png" width="22" height="17" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{tender}}
      </td>
      <td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px;text-align:right;">
        &nbsp;
      </td>
    </tr>
  </table>

</td>

I've seen some sites with SOF. find some solutions. none of them seems working. Let me know If I'm missing any additional CSS property for Outlook ?

CodePudding user response：

For this it appears the only way to get it working for Outlook is to wrap it in a table.

<tr>
  <td style="background:#fff;">
    <h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
    <h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
  </td>
</tr>
<tr>
  <td>
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td width="22">
          <!--Use this to control space between icon and text-->
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <!--No need to put width here. It will automatically size (and is responsive without a width) -->
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
          </p>
        </td>
      </tr>
      <tr>
        <td width="22">
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
        </td>
      </tr>
    </table>
  </td>
</tr>

I've put in an extra <tr><td><table> so that when you use two columns, you don't have to use colspan, which can cause issues.

You can now also fine-tune spacing with padding on the <td> elements.