Image not aligning to the center in Outlook

Hey guys,

I've put together a new email and it doesn't matter what I do I cannot center 2 icons in the email.
They keep to the left always: http://prntscr.com/6ojoiz

Here is the code: http://snipsave.com/user/profile/balintsipos#10650

Any idea what I am doing wrong here?

I've tried different ways to align it to center, even using the <center> tag but it stays on the left.

Can you help me out here?

Best,

Baloint

roshodgekiss roshodgekiss, 1 year ago

Hi there sbi85, I see the display attribute has been used twice on this image. In this snippet:

<img src="http://www2.idioplatform.com/l/20742/2015-04-01/214n21/20742/51776/eye_icon2.png" width="100px" alt="Customer Insight" border="0" style="max-width: 100px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;display: block;">

...you'll see that there's both display: inline !important; and display: block;. I'd recommend including the latter only if you're planning to do any alignment/positioning like this. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Aditza, 1 year ago

Hi Baloint,

Your code is very bad. You must not add px to html width attribute, so width="100px" must be width="100", px you add only to css. But in your case you don't need to add width because you have a 100% table with 1 column.

To center an image you simply put align="center" to td.
Something like this

<tr>
    <td align="center"><img src="image-path" width="100" height="100" alt="" style="display:block" /></td>
</tr>

You must add border:none to css if you put a link on that image.

Regards

sbi85, 1 year ago

Hey guys,

Thanks for the help.
The problem was indeed the display: block here. After removing it the image properly aligned to the middle.

@Aditza
Yes, that was the first thing I tried. At that point I wished it was that easy.
You are right about the px-s, not sure why I added them there.
I had no training in HTML/CSS whatsoever and I'm not a web or email designer so making mistakes like that is pretty easy.
I'd like to hear more though about the rest of the code. Have you found anything else particular for mentioning its bad code?

ps. oh and there is border: 0 on the image, so adding border:none to it is pretty redundant

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098