center image in html mail - html

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:
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> (deprecated)</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.
Horizontal Alignment (Arbitrary Elements)
Horizontal Alignment (Text Elements)
Vertical Alignment (Arbitrary Elements)
Vertical Alignment (Text Elements)

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