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.

Solution 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)

Solution 2

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

Trick is to make the parent table fixed width with align center property.

Giving margin: 0 auto; is 2nd option.

And if it is regular text content, then only align="center" will do the job. Like the following,

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

Hope this one helps.

Comments

[Felix]

my full original code gist.github.com/holzfelix/7de401e510b69b3b604216388109810b

[Felix]

thanks. style="text-align: center;" on each element works fine.

[gwally]

It doesn't matter if <center> tag is deprecated in HTML 5. It's not deprecated in Outlook, which does not follow current HTML standards. Your sample uses padding which also has conflicts with Outlook. It's critical to remember that email development is not web development.

[UncaughtTypeError]

@gwally Yes. The distinction between writing html for email clients and web browsers is quite clear, I often take this for granted. In regards to the deprecated <center> tag, the point is not to use it, since at any time the feature may cease to work - this is just good to know in general and doesn't need to apply to writing "email-client friendly" html. I thought this should be obvious but the padding is purely for demonstration, to "neaten the presentation".

[gwally]

@UncaughtTypeError <center> will never cease to work in the current versions of Outlook, Lotus or AOL. This thread is about centering an object in an Outlook email and sadly, sometimes you have to use <center>.