CODEWITHSUNDEEP
htmlcssemailoutlook
Felix
Felix

Reputation: 5619

center image in html mail

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.

Upvotes: 11

Views: 44593

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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

Upvotes: 16

Dipak Kumar Pusti
Dipak Kumar Pusti

Reputation: 1723

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

Upvotes: 8

Related Questions