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.

please check this https://stackoverflow.com/questions/2857765/whats-the-best-way-to-center-your-html-email-content-in-the-browser-window-or and https://stackoverflow.com/questions/15543593/html-email-align-text-and-image — core114, Dec 06 '17 at 11:11
`center` has been deprecated in favour of `text-align: center`(don't use ``) - declare this rule as an inline property on the *containing element* (`th`) of the `img` element in question. Then define your `img` tag as an *inline-block* by declaring the inline property of `display: inline-block` — UncaughtTypeError, Dec 06 '17 at 11:13
Possible duplicate of [What's the best way to center your HTML email content in the browser window (or email client preview pane)?](https://stackoverflow.com/questions/2857765/whats-the-best-way-to-center-your-html-email-content-in-the-browser-window-or) — dipak_pusti, Dec 06 '17 at 11:24

score 14 · Accepted Answer · answered Dec 06 '17 at 11:51

<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:

text-align: center instead on the containing element (th) of the img element, or
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:

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

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

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

Vertical & Horizontal Alignment Demonstrations:

For Reference Sake.

thanks. `style="text-align: center;"` on each element works fine. — Felix, Dec 06 '17 at 12:27
It doesn't matter if `` 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. — gwally, Dec 06 '17 at 19:38
@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 `` 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". — UncaughtTypeError, Dec 06 '17 at 20:23
@UncaughtTypeError `` 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 ``. — gwally, Dec 06 '17 at 20:36

dipak_pusti · Answer 2 · 2017-12-06T11:30:35.500

<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.

my full original code https://gist.github.com/holzfelix/7de401e510b69b3b604216388109810b — Felix, Dec 06 '17 at 11:51

center image in html mail

2 Answers2