center image in html mail

Question

How can I center an image in a html mail that it works in outlook as well.

I tried this:

<th align="center">
        <center data-parsed="" class="logo">
            <img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/>
        </center>
</th>

as well tried like this

<p style="text-align: center"><img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/></>

In browser it looks nice. But in outlook not.

What could be a working solution?

thanks.

Answer 1

<center> has been deprecated in favour of text-align: center.

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Ref: <center> - HTML | MDN

Consider using:

1. text-align: center instead on the containing element (th) of the img element, or
2. display: block; margin: auto on the nested img element

...as demonstrated in the embedded code snippet below.

Code Snippet Demonstration:

*:not(code) {
  font-family: arial;
}

code {
  background: #cccccc;
  padding: 3px;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>align="center"</code> attribute <sup><small><i class="fa fa-thumbs-o-down"></i> (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#Attributes" target="_blank">deprecated</a>)</small></sup> on containing element
    </th>
  </tr>
  <tr>
    <th align="center" style="border: 1px solid gray; padding: 10px;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0"/>
    </th>
  </tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>text-align:center</code> inline-style property on containing element
    </th>
  </tr>
  <tr>
    <th style="border: 1px solid gray; padding: 10px; text-align: center;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="display: inline-block;"/>
    </th>
  </tr>
  <tr>
    <td style="padding: 10px;">
      <p>In most cases declaring <code>text-align: center</code> on the containing parent element is enough since <code>img</code> elements are inheritly <em>inline</em>. But to ensure that this behaviour is consistent across all email clients declare <code>display: inline-block</code> on the nested <code>img</code> as well.</p>
    </td>
  </tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>display: block; margin: auto;</code> inline-style properties on nested <code>img</code>
    </th>
  </tr>
  <tr>
    <th style="border: 1px solid gray; padding: 10px;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="margin: auto; display: block;"/>
    </th>
  </tr>
</table>

Summary:

To center align an inline element horizontally, you need to:

1. declare text-align: center on the containing (parent) element

To center align a block element horizontally, you need to:

1. declare margin: auto on the block element
2. ensure that it is defined as a block element (display: block)
3. ensure a specified width is defined (width: 207px)

Vertical & Horizontal Alignment Demonstrations:

For Reference Sake.

1. Horizontal Alignment (Arbitrary Elements)
2. Horizontal Alignment (Text Elements)
3. Vertical Alignment (Arbitrary Elements)
4. Vertical Alignment (Text Elements)