E-Mail Signature

Question

For the past two days I was trying to figure how CodeTwo software works in order to make a signature for the email.

I got to a point where I have the signature almost ready but with one problem. I can't figure out how to vertically align an image (which is an icon) with the text. (because the software uses tables to align elements) Basically, I have a tr with a td where I have this two elements that I want to center. I attached a screenshot to show you what I mean by this. Any suggestions? Thanks in advance.

CODE Snippet: https://codepen.io/ovidiu1207/pen/xLerjy

Answer 1

SOLVED (forking from your codepen) => https://codepen.io/anon/pen/XawXEG

I was trying to "guess" the HTML based on your screenshot, so hopefully this solution works for you:

 .img { margin-right: 6px; vertical-align: middle; } 

 <table> <tr> <td><img src="http://lorempixel.com/30/30" alt="banana" class="img">{Mobile}</td> </tr> </table> 

Answer 2

You can try attribute valign="top" or css style="vertical-align:top;" or both to your td like given sample.

<td valign="top" style="vertical-align:top;"></td>

Answer 3

CodeTwo seems to add a lot of useless code to the markup. I've tried playing with the elements and adding the property vertical-align: middle; to both the images seems to have worked.

https://codepen.io/anon/pen/WEWExX