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?
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 :)
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.
Thanks for the help.
The problem was indeed the display: block here. After removing it the image properly aligned to the middle.
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